javascript - 如何在克隆之前使用 jQuery 编辑 HTML5 模板标签的内容？

Question

我目前正在尝试设置一个模板，每次我都可以在 for 循环中填写并克隆该模板。到目前为止，这是我所拥有的，它可以很好地克隆模板 HTML，但我一直在尝试在克隆之前操作我的模板。

尝试在克隆上执行类似 find() 的操作是行不通的，我认为这与模板是 #document-fragment 有关吗？

有人可以给我一个关于如何做到这一点的 jQuery 示例吗？也许像在克隆模板之前操作 h1 标题一样简单？

<div class="template-holder"></div>

<template class="my-custom-template">
  <div class="example">
    <h1>Example</h1>  
    <h2>Example 2</h2>
    <div class="customDiv">Testing</div>
  </div>
</template>

Javascript:

var template = $('.my-custom-template');

var clone = template.clone();

$('.template-holder').append(clone.html());

JSFiddle 示例:

https://jsfiddle.net/Lmyyyb4k/2/

编辑:

看起来 jQuery 本身不支持文档片段:http://james.padolsey.com/stuff/jQueryBookThing/#doc-fragments

所以我想我必须将一些 vanilla JS 与 jQuery 结合起来。

Answer 1

如果您使用与模板不同的元素，它会起作用:

<div class="template-holder"></div>

<div class="my-custom-template" style="display:none">
  <div class="example">
    <h1>Example</h1>  
    <h2>Example 2</h2>
    <div class="customDiv">Testing</div>
  </div>
</div>

这将在克隆模板之前操作模板中的 h1 标题:

var template = $('.my-custom-template');
template.find("h1").text("Changed H1 Title!");

var clone = template.clone();
$('.template-holder').append(clone);
clone.show();