Question

I want to generate a kind toc for a html document with jQuery – without
using any plugins. I’m just starting to learn/improve my jQuery know-how.

HTML input:

<div id="toc"></div>
<h3><a name="construction-block"></a>Construction Block</h3><p>...</p>
<h3><a name="construction-box"></a>Construction Box</h3><p>...</p>
...

JS:

$(document).ready(function(){
$("#toc").append('<p>table of contents:</p>');
$("h3").each(function(i) {
    var current = $(this);
    $("#toc").append("<h3>"+current.html()+"</h3>");
});
})

HTML output

<div id="toc">
<p>table of contents:</p>
<h3>
<a name="construction-block"></a>
Construction Block
</h3>
<h3>
<a name="construction-box"></a>
Construction Boxk
</h3>
</div>

It’s only partial success.

Desired HTML output

<div id="toc">
<p>table of contents:</p>
<h3>
<a href="#construction-block">Construction Block</a>
</h3>
<h3>
<a href="#construction-box">Construction Box</a>
</h3>
</div>

Answer 1

I’d suggest the following (given some changes in the HTML):

$('<p />', {
    'text': 'Table of contents'
}).appendTo('#toc');
$('<ol />').appendTo('#toc');

$('h3').each(
    function() {
        var that = this,
            $that = $(that),
            a = $('<a />', {
                'href': '#' + that.id,
                'text': $that.text()
            }),
            li = $('<li />').append(a).appendTo('#toc ol');
    });​

This jQuery creates an ordered list (which is, essentially, a semantic definition of what a table of contents is), and appends the text of the h3 elements to a new a element within newly-created, and appended, list-items.

The HTML changes are the removal of the <a> elements, since the id can (and should) be used instead of named anchors (and this also works in IE).

The new HTML:

<div id="toc"></div>
<h3 id="construction-block">Construction Block</h3>
<p>...</p>
<h3 id="construction-box">Construction Box</h3>
<p>...</p>

JS Fiddle demo.

I didn’t think of this until now, but you could achieve the same even without id attributes on the h3 elements, and simply use the jQuery to create the relevant id attributes as it goes:

$('<p />', {
    'text': 'Table of contents'
}).appendTo('#toc');
$('<ol />').appendTo('#toc');

$('h3').each(
    function(i,el) {
        var $that = $(el),
            text = $that.text(),
            id = text.toLowerCase().replace(/\s+/,'-');
        el.id = id;
        var a = $('<a />', {
            'href' : '#' + id,
            'text' : text
        }),
            li = $('<li />').append(a).appendTo('#toc ol');
    });​

JS Fiddle demo.

References:

• append().
• appendTo().
• jQuery (how to create elements with jQuery).
• Regular Expressions.
• String.replace().
• String.toLowerCase().
• text().