Javascript 如何从Html5模板标签克隆和修改

我有一个模板：

<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
  function useIt() {
    var content = document.querySelector('template').content;
    // Update something in the template DOM.
    var span = content.querySelector('span');
    span.textContent = parseInt(span.textContent) + 1;
    document.querySelector('#container').appendChild(
        document.importNode(content, true));
  }
</script>

<template>
  <div>Template used: <span>0</span></div>
  <script>alert('Thanks!')</script>
</template>

使用我
函数useIt（）{
var content=document.querySelector（“模板”）.content；
//更新模板DOM中的某些内容。
var span=content.querySelector（'span'）；
span.textContent=parseInt（span.textContent）+1；
document.querySelector（“#container”）.appendChild(
document.importNode（content，true））；
}
使用的模板：0
警惕（“谢谢！”）

你可以试试代码。 这段代码基本上将模板（html5模板不会在屏幕上呈现）复制到另一个div中。这允许您重用DOM

问题：行“span.textContent=parseInt（span.textContent）+1；”直接更改模板代码。我需要操纵内容DOM并将其克隆到容器中，而不更改模板。这是非常重要的，因为如果我想重用代码，我需要它保持不变

---

我已经尝试了多种方法来使用jQuery来模拟上面的javascript代码，但我无法找到答案。如果有一种jQuery方式会更好。

如果您需要使用新的

标记，那么您会稍微陷入困境。最干净的替代方法是使用

importNode

引入内容，然后在附加内容后对其进行修改

假设模板化的代码实际上很小，这应该发生得足够快，以至于您永远不会注意到方法上的差异，不过在这个特定示例中，

alert（）

，会延迟内容的更改，因此您会看到“0”，直到您单击“OK”，然后它会更新为“1”

这方面的代码更改为：

function useIt() {
    var content = document.querySelector('template').content;

    var targetContainer = document.querySelector('#container');
    targetContainer.appendChild(document.importNode(content, true));

    var $span = $(targetContainer).find("div:last-of-type").find("span");
    $span.text(parseInt($span.text() + 1));
}

如果您还没有接受

的思想，那么可以使用jQuery的

clone（）

方法来做您想做的事情，非常简单。但是，由于特定元素的特殊性质，clone无法“看到”某个

的内容，因此必须以其他方式存储模板化代码（JS变量、隐藏div等）

但是如果需要克隆脚本，此方法将不起作用，就像

克隆脚本一样。创建或附加克隆版本时，它不会触发“模板容器”元素中的任何脚本代码。此外，如果将其存储在隐藏的

中，“模板容器”元素中的任何脚本代码都将在页面加载时立即触发

clone（）

方法的简单代码版本如下所示：

function useIt() {
    var $content = $("#template").clone();
    var $span = $content.find("span");
    $span.text(parseInt($span.text()) + 1);

    $content.children().each(function() {
        $("#container").append($(this));
    });
}

假设您的模板是：

<div id="template" style="display: none;">
    <div>Template used: <span>0</span></div>
    <script>alert('Thanks!')</script>
</div>

使用的模板：0
警惕（“谢谢！”）

---

您还可以将

警报（“谢谢！”）

移出模板并进入脚本部分（在您完成“附加循环”之后），以获得所需的警报功能，如果您愿意的话。

这是一个老问题，但是，您是否尝试了cloneNode（true）？它适用于模板，如下所示：

var span = content.querySelector('span').cloneNode(true)

---

问候。

感谢您指出jQuery没有看到模板标记。我想说您代码中的顺序是错误的。我会按以下顺序尝试：1。查询模板。2.导入节点。3.修改内容。4.附加到DOM。