Best way to take the content from an LI tag and copy it elsewhere?
<p>I'm trying to take content from a list (but not including the LI tag wrapped around it) and copy it elsewhere.</p>

<p>I've got this fiddle here: <a href="http://jsfiddle.net/csaltyj/u5tFb/" rel="nofollow">http://jsfiddle.net/csaltyj/u5tFb/</a></p>

<p>I simply cannot figure this out. How do I get this working right?</p>

<p>HTML:</p>

<pre><code>&lt;div id="container"&gt;
&lt;/div&gt;

&lt;ul&gt;
   &lt;li&gt;&lt;p&gt;Text 1&lt;/p&gt;&lt;em&gt;Text 2&lt;/em&gt;&lt;/li&gt;
   &lt;li&gt;Gonna copy me too?&lt;/li&gt;
   &lt;li&gt;&lt;h3&gt;We're gonna be in DIVs!&lt;/h3&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;button id="copy"&gt;Copy&lt;/button&gt;
&lt;button id="clear"&gt;Clear DIV&lt;/button&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#container {
    background: #eee;
}

#container .special {
    border: 1px solid red;
}

li {
    list-style-type: disc;
    margin: 1em;
}
</code></pre>

<p>jQuery:</p>

<pre><code>$('#copy').click(function() {
    $('li').each(function(i) {
        $(this).clone().contents().wrap('&lt;div class="special" /&gt;').appendTo('#container');
    });
});
</code></pre>

<p>jQuery:</p>
