title: Duplicating dom element in javascript
body: <p>I'm trying to create a function that when onclick happens, it duplicates a selected (by class name) dom element in the html in javascript.</p>
  
  <p>so far I have and I'm looking to build up listItem's onclick</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      document.getElementById("button").onclick = duplicate;
      var i = 0;
      var original = document.getElementByClassName('listItem');
  
      function duplicate() {
          var clone = original.cloneNode(true); // "deep" clone
          clone.class = "listItem"; // there can only be one element with an ID
          original.parentNode.appendChild(clone);
      }
  &lt;/script&gt;
  
  &lt;div class="listItem"&gt;
      &lt;div class="thumb"&gt;
          &lt;a href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="description"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      &lt;/div&gt;
      &lt;div class="btn"&gt;
          &lt;a href="#" title="More Info"&gt;More Info&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button id="button" onclick="duplicate()"&gt;Click me&lt;/button&gt;
  </code></pre>