Javascript 如何保存<；模板>；第二次使用？

我正在尝试在网页中正确使用HTML5模板。然而，我发现当我将模板的内容放入网页的某个部分时，模板被清空，同样的操作无法再次执行如何确保模板不被清空，或者应该使用其他技术？

例子 HTML:

现场演示：

只需添加克隆（），然后您就可以再次使用它

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

只需添加克隆（），即可再次使用

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

“如何确保模板不被清空？”

使用模板的

内容

后，模板将变为“活动”（as）您无法读取“实时”模板的

内容

。因此，如果您想要重用模板，您应该克隆模板的

内容

，并且从一开始就不要激活原始模板

---

jQuery

如前所述，您可以使用jQuery的

.clone（）

方法来实现这一点。您还可以使用

.html（）

方法获得相同的结果

纯JavaScript

如注释中所述，您还可以使用模板

节点的
.cloneNode（true）
方法执行模板的深度复制。因此，您不激活原始模板，而是激活克隆

或者，使用
.importNode（）
复制模板
内容
“如何确保模板不被清空？”

使用模板的
内容
后，模板将变为“活动”（as）您无法读取“实时”模板的
内容
。因此，如果您想要重用模板，您应该克隆模板的
内容
，并且从一开始就不要激活原始模板


jQuery

如前所述，您可以使用jQuery的
.clone（）
方法来实现这一点。您还可以使用
.html（）
方法获得相同的结果

纯JavaScript

如注释中所述，您还可以使用模板
节点的
.cloneNode（true）
方法执行模板的深度复制。因此，您不激活原始模板，而是激活克隆

或者，使用
.importNode（）
复制模板
内容
旁注：您是想标记jQuery而不是用JavaScript标记？@CaseyFalk很好！我没有标记JQ，因为这不依赖于JQ。我使用它进行代码压缩，但可以在裸JS中轻松使用
addEventListener
，
document.getElementById
，等等。据我所知，问题及其根本问题将保持不变。特别是因为文档说
content
属性是“只读的”（read-only）。好的，您不能访问live模板的
内容
？因此，我们正在克隆它，这样模板就永远不会生效，但我们还是可以读取它？呵呵。有效禁用模板的好处是什么？我想知道他们为什么做出这样的设计选择…@CaseyFalk:with的设计选择是为了防止标签加载，以及其他一些事情。回答得好。本质上，这只是一种在html中放置半任意字符串的语义方式，加上一些糖可以轻松地从该字符串创建一个片段。旁注：你的意思是标记jQuery而不是用JavaScript标记/吗？@CaseyFalk很好！我没有标记JQ，因为这不依赖于JQ。我使用它进行代码压缩，但可以在裸JS中轻松使用
addEventListener
，
document.getElementById
，等等。据我所知，问题及其根本问题将保持不变。特别是因为文档说
content
属性是“只读的”（read-only）。好的，您不能访问live模板的
内容
？因此，我们正在克隆它，这样模板就永远不会生效，但我们还是可以读取它？呵呵。有效禁用模板的好处是什么？我想知道他们为什么做出这样的设计选择…@CaseyFalk:with的设计选择是为了防止标签加载，以及其他一些事情。回答得好。本质上，这只是一种在html中放置半任意字符串的语义方式，加上一些糖可以轻松地从该字符串创建片段。
.html（）
似乎也可以，而不是
.clone（）[0]。内容
。（）@CaseyFalk确实有效，但这是W3C想要的方式吗？如果我不太担心正确的做事方式的话，我会使用它“这是W3C想要的方式吗？”——我不认为W3C想要你使用jQuery
.clone（）
和
.html（）
之间的区别是一个jQuery问题。@CaseyFalk再次强调，这与JQ无关。我使用它进行代码压缩，但可以在裸JS中轻松使用addEventListener、document.getElementById等。据我所知，问题及其根本问题将保持不变。@CaseyFalk我的意思是“W3C是否打算在阅读之前克隆模板的内容？”
.html（）
似乎也能正常工作，而不是
.clone（）[0]。内容
。（）@CaseyFalk确实有效，但这是W3C想要的方式吗？如果我不太担心正确的做事方式的话，我会使用它“这是W3C想要的方式吗？”——我不认为W3C想要你使用jQuery
.clone（）
和
.html（）
之间的区别是一个jQuery问题。@CaseyFalk再次强调，这与JQ无关。我使用它进行代码压缩，但可以在裸JS中轻松使用addEventListener、document.getElementById等。据我所知，这个问题及其根本问题将保持不变。@CaseyFalk I more m
$("#replace-button").click(function(event) {
    $("#holder").html($("#my-template").clone()[0].content);
});