When to use clone()
<p>I need to dynamically add rows to a table.  I know that I want a model row to look like the following:</p>

<pre class="lang-html prettyprint-override"><code>&lt;tr id="row"&gt;
  &lt;td&gt;&lt;input type="text" name="name"/&gt;&lt;/td&gt;
  &lt;td&gt;&lt;span&gt;TEXT HERE&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="checkbox" name="asdf"/&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>I am wondering if I should just write code to reproduce this row from scratch or if I should use jQuery's clone() method, as so:</p>

<pre class="lang-js prettyprint-override"><code>//Would document this better in production
$('#row').clone().attr('id', 'row2').insertAfter('#row');  
</code></pre>

<p>and then make sure that the original <code>#row</code> element was kept hidden with CSS.</p>

<p>Generalizing this question, would having a hidden DOM element and then cloning that element when it is needed a good practice for jQuery?  Or is there a cleaner solution for this type of problem?</p>

<p>Thanks!</p>
