title: Duplicating an element (and its style) with JavaScript
body: <p>For a JavaScript library I'm implementing, I need <strong>to clone an element which has exactly the same applied style than the original</strong> one. Although I've gained a rather decent knowledge of JavaScript, as a programming language, while developing it, I'm still a DOM scripting newbie, so any advice about how this can be achieved would be extremely helpful (and it has to be done without using any other JavaScript library).</p>
  
  <p>Thank you very much in advance.</p>
  
  <p>Edit: <code>cloneNode(true)</code> does not clone the computed style of the element. Let's say you have the following HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;p id="origin"&gt;This is the first paragraph.&lt;/p&gt;
    &lt;div id="destination"&gt;
      &lt;p&gt;The cloned paragraph is below:&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And some style like:</p>
  
  <pre><code>body &gt; p {
    font-size: 1.4em;
    font-family: Georgia;
    padding: 2em;
    background: rgb(165, 177, 33);
    color: rgb(66, 52, 49);
  }
  </code></pre>
  
  <p>If you just clone the element, using something like:</p>
  
  <pre><code>var element = document.getElementById('origin');
  var copy = element.cloneNode(true);
  var destination = document.getElementById('destination');
  destination.appendChild(copy);
  </code></pre>
  
  <p>Styles are not cloned. </p>