如何保存一个<模板>供二次使用

How can I save a <template> for a second use?

本文关键字：二次 模板 何保存 一个 保存      更新时间：2023-09-26

我试图在网页中正确使用HTML5模板。然而，我发现当我把一个模板的内容放到网页的某个部分时，模板被清空了，同样的动作不能再执行了。我如何确保模板不被清空，或者我应该使用不同的技术?

HTML: 

<div>
    <button id="replace-button">Click to show template</button>
    <div id="holder"></div>
</div>
<template id="my-template">Hooray! Now, note that when you try again, this area will be blank.</template>
JavaScript: 

$("#replace-button").click(replaceWithTemplate);
function replaceWithTemplate(event) {
    $("#holder").html($("#my-template")[0].content);
}

实时演示:http://jsfiddle.net/Supuhstar/y33a9/

"如何确保模板不被清空?"

在您使用模板的content之后，模板变成了"活的"(正如Eric所说的)。您无法读取"活动"模板的content。因此，如果您想重用一个模板，您应该克隆模板的content，并且从一开始就不要激活原始模板。

jQuery

正如Will所提到的，您可以使用jQuery的.clone()方法来完成此操作。您也可以使用.html()方法获得相同的结果。(小提琴)

纯JavaScript

正如Dan Davis在评论中提到的，您还可以使用模板node的.cloneNode(true)方法来执行模板的深度复制。因此，您不是激活原始模板，而是激活克隆模板。(小提琴)

或者， MDN Docs使用.importNode()复制模板content

只需添加clone()，然后您可以再次使用它。

$("#replace-button").click(function(event) {
    $("#holder").html($("#my-template").clone()[0].content);
});
相关文章：