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