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

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>

你可以在这里试试代码.此代码基本上将模板(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>由于该特定元素的特殊性,clone不会"看到"a的内容,因此您必须以其他方式存储模板化代码(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)

问候。