Как отредактировать содержимое тега шаблона HTML5 с помощью jQuery перед клонированием?

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/

Edit:

Похоже, сам 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();