如何在克隆之前使用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本身并没有对文件的frag任何支持因此，我想我将不得不将一些香草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();