クローン作成する前に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のためのあらゆるサポートを持っていないように見えますメント：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();