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

Question

我有一个模板：

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));
}

<button onclick="useIt()">Use me</button>
<div id="container"></div>

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

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

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

我尝试了多种方法来使用 jQuery 来模仿上面的 javascript 代码，但我无法弄清楚。如果有jQuery的方式就更好了。

Answer 1

如果你需要使用新的<template> 标签，那么你就有点卡住了。 . .您最干净的替代方法是使用importNode 引入内容，然后在附加后对其进行修改。

假设模板化代码非常小，这应该发生得足够快，以至于您永远不会注意到方法的差异，但是，在这个特定的示例中，alert() 会延迟内容的更改，所以您会看到“0”，直到您单击“确定”，然后它会更新为“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));
}

如果你不认同<templates> 的想法，你可以使用jQuery 的clone() 方法来做你想做的事，非常容易。 . .但是，由于该特定元素的特殊性质，克隆不会“看到”<template> 的内容，因此您必须以其他方式存储模板代码（JS 变量、隐藏的 div 等）。

但是，如果您需要克隆脚本，则此方法将不起作用，就像 <template> 那样。创建或附加克隆版本时，它不会触发“模板容器”元素中的任何脚本代码。此外，如果您将其存储在隐藏的<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>

如果您愿意，您还可以将<script>alert('Thanks!')</script> 移出模板并进入脚本部分（在完成“追加循环”之后），以实现所需的警报功能。

Answer 2

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

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

问候。