Question

我有一个模板：

<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>

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

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

我已尝试过多种方法来使用jQuery来模仿上面的javascript代码，但我无法弄明白。如果有一个jQuery方式会更好。

Answer 1

如果您需要使用新的<template>标记，那么您会被轻微卡住。。。您最干净的选择是使用importNode引入内容，然后在附加后修改内容。

假设模板化的代码实际上很小，这应该足够快，以至于你永远不会注意到方法上的差异，但是，在这个特定的例子中，alert()会延迟内容的更改，所以你会看到＆＃34; 0＆＃34;，直到你点击＆＃34;好的＆＃34;，然后它会更新为＆＃34; 1＆＃34;。

代码更改将是：

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＆＃39; clone()方法做你想做的事情，非常容易。。。但是，克隆没有＆＃34;看＆＃34; <template>的内容，由于该特定元素的特殊性，因此您必须以其他方式存储模板化代码（JS变量，隐藏div等）。

HOWEVER ，如果您需要克隆脚本（<template>的方式），此方法将无效。它不会触发＆＃34;模板容器中的任何脚本代码＆＃34;创建或附加克隆版本时的元素。此外，如果您将其存储在隐藏的<div>中，那么＆＃34;模板容器中的任何脚本代码都会被包含在内。元素将在页面加载时立即触发。

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>移出模板并进入脚本部分（在完成＆＃34;追加循环＆＃34;之后），以获得所需的警报功能（如果您愿意）。

Answer 2

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

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

致谢。

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

2 个答案: