title: How to clone and modify from Html5 Template Tag
body: <p>I have a template:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function useIt() {
    var content = document.querySelector('template').content;
    // Update something in the template DOM.
    var span = content.querySelector('span');
    span.textContent = parseInt(span.textContent) + 1;
    document.querySelector('#container').appendChild(
      document.importNode(content, true));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="useIt()"&gt;Use me&lt;/button&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  
  &lt;template&gt;
      &lt;div&gt;Template used: &lt;span&gt;0&lt;/span&gt;&lt;/div&gt;
      &lt;script&gt;alert('Thanks!')&lt;/script&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>You can try the code <a href="http://www.html5rocks.com/en/tutorials/webcomponents/template/" rel="nofollow noreferrer">here</a>.
  This code basically copies the template(html5 templates does not render on your screen) into another div. This allows you to reuse the DOM.</p>
  <p>Problem: The line &quot;span.textContent = parseInt(span.textContent) + 1;&quot; changes the template code directly. I need to manipulate the content DOM and clone it into the container, <strong>without</strong> changing the template. This is very important since if I want to reuse the code, I need it to stay the same.</p>
  <p>I have tried multiple ways to use jQuery to mimic the above javascript code, but I can't manage to figure it out. It would be better if there is a jQuery way.</p>