title: Javascript cloning elements
body: <pre><code>&lt;body&gt;
  &lt;div&gt;
      &lt;p id="test"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;script&gt;
      //  I'm trying to clone an element
      var h1 = document.createElement('h1'); // I create &lt;h1&gt;
      h1.innerHTML('test'); // I put some text between this element &lt;h1&gt;test&lt;/h1&gt;
      document.getElementById('test').appendChild(h1); // I add this h1 to &lt;p id="test"&gt;&lt;h1&gt;test&lt;/h&gt;
      var h1Clone = h1.cloneNode(true); // I use cloneNode to clone h1
  
      // Here I'll clone the &lt;p&gt; tag and add h1Clone to it
      var paragraph = document.getElementById('test'); // Look for id="test"
      paragraph.appendChild(h1); // Add h1 as &lt;p&gt;'s child
      var paragraphClone = paragraph.cloneNode(true); // Clone &lt;p&gt;
      paragraphClone.appendChild(h1Clone); // Add h1Clone as &lt;p&gt;'s (clone) child.
  
      paragraph.parentNode.appendChild(paragraphClone); // Finally I add &lt;p&gt;'s clone to &lt;body&gt; tag
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hello, I commented everything so you can understand what I'm trying to do..
  Why can't I make it working?</p>
  
  <p>Here is the final html result that I'm trying to have:</p>
  
  <pre><code>&lt;p id="test"&gt;&lt;h1&gt;test&lt;/h1&gt;&lt;/p&gt;
  &lt;p id="test"&gt;&lt;h1&gt;test&lt;/h1&gt;&lt;/p&gt; &lt;-- clone -&gt;
  </code></pre>