Appending wrapped elements doesn't include wrapper
<p>I am trying understand why the <code>.wrap()</code> function in my basic table of contents function isn't working. The function filters headers from a textarea and places them in an iframe, and the basic part works. But whereas my desired output is this:</p>

<pre><code>&lt;ul&gt;
&lt;li class="toc_h2"&gt;This is an h2&lt;/li&gt;
&lt;li class="toc_h3"&gt;This is an h3&lt;/li&gt;
&lt;li class="toc_h1"&gt;This is an h1&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What I am actually getting is this:</p>

<pre><code>&lt;ul&gt;
&lt;h2&gt;This is an h2&lt;/h2&gt;
&lt;h3&gt;This is an h3&lt;/h3&gt;
&lt;h1&gt;This is an h1&lt;/h1&gt;
&lt;/ul&gt;
</code></pre>

<p>How can I fix this/what am I misunderstanding? The code is here and at <a href="http://jsfiddle.net/supertrue/JgWxJ/" rel="nofollow">http://jsfiddle.net/supertrue/JgWxJ/</a></p>

<pre><code>headers.each(function(i) {
   $(this).wrap('&lt;li class="toc_' + this.nodeName.toLowerCase() + '"&gt;&lt;/li&gt;').appendTo(toc);
});
</code></pre>
