如何在克隆前使用 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

所以我想我必须将一些原始 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();

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

How do I edit the contents of HTML5 template tag with jQuery before cloning?

html

javascript

jquery

clone