如果你需要使用新的<template>标签，那么你就有点卡住了。.最干净的替代方法是使用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));
}

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

然而，如果您需要克隆脚本，则此方法将不起作用，就像<template>一样。当创建或追加克隆版本时，它不会触发“模板容器”元素中的任何脚本代码。此外，如果将其存储在隐藏的<div>中，则“template container”元素中的任何脚本代码都将在页面加载时立即触发。

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>移出模板并移入脚本部分（在完成“append循环”之后），以实现所需的警报功能。

这是一个老问题，但是，你试过cloneNode（true）吗？它适用于模板，如下所示：

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

使用完整的示例：

function useIt() {
  var content = document.querySelector('template').content.cloneNode(true);
  // 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>

问候。