Question

I am trying understand why the .wrap() 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:

<ul>
<li class="toc_h2">This is an h2</li>
<li class="toc_h3">This is an h3</li>
<li class="toc_h1">This is an h1</li>
</ul>

What I am actually getting is this:

<ul>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h1>This is an h1</h1>
</ul>

How can I fix this/what am I misunderstanding? The code is here and at http://jsfiddle.net/supertrue/JgWxJ/

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

Answer 1

You can change this:

 $(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);

to this:

 $('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').html(this).appendTo(toc);

Here’s your fiddle: http://jsfiddle.net/JgWxJ/7/

---

Alternatively, you could just add .parent() before appending:

$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').parent().appendTo(toc);

…and here’s the fiddle: http://jsfiddle.net/JgWxJ/10/