How do I make a deep copy of a dynamically created element in jQuery?
<p>I want to dynamically generate 8 new paragraphs with jQuery:</p>

<p><a href="http://jsfiddle.net/johnhoffman/Dfydn/" rel="nofollow">http://jsfiddle.net/johnhoffman/Dfydn/</a></p>

<p>However, this snippet of jQuery only adds a single paragraph to my div (with the text "7" in it).</p>

<pre><code>var attached = $("&lt;p&gt;");
var sandbox = $("#sandbox");

for (var i = 0; i &lt; 8; i++) {
    // How come reseting attached works? attached = $("&lt;p&gt;");
    attached.html(i).appendTo(sandbox);
}​
</code></pre>

<p>HTML: <code>&lt;div id="sandbox"&gt;&lt;/div&gt;​</code></p>

<p>I do not want to run <code>attached = $("&lt;p&gt;");</code> for every iteration of the loop because I want to make use of the prototype design pattern - I want to build a paragraph and then alter copies of it to preventing having to build from scratch every time. How do I make a deep copy of a dynamically created element?</p>
