Javascript 在克隆之前，如何使用jQuery编辑HTML5模板标记的内容？

我目前正在尝试设置一个模板，每次都可以在for循环中填写并克隆该模板。这就是我到目前为止所做的，它可以很好地克隆HTML模板，但是我在克隆模板之前一直在尝试操作我的模板

试图在克隆上执行类似于

find（）

的操作是行不通的，我认为这与模板是

#文档片段有关

有人能给我举一个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>

JSFIDLE示例：


编辑：

jQuery本身似乎不支持文档片段：

因此，我想我必须将一些普通的JS与jQuery结合起来。
如果使用不同于模板的元素，那么它可以工作：

<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>

模板标记将是理想的，因为它已经将模板标记内的所有内容作为默认行为（音频、视频、显示等）抑制。
<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>

var template = $('.my-custom-template');
template.find("h1").text("Changed H1 Title!");

var clone = template.clone();
$('.template-holder').append(clone);
clone.show();