Wrapping Elements

jQuery’s method for wrapping elements around other elements is the appropriately named .wrap(). Because we want each $(this) to be wrapped in <li></li>, we can complete our footnote code like so:

$(document).ready(function() {
  $('<ol id="notes"></ol>').insertAfter('div.chapter');
  $('span.footnote').each(function(index) {
    $(this)
      .before('<a href="#foot-note-' + (index+1) +
           '"id="context-' + (index+1) + '" class="context"><sup>' +
                                            (index+1) + '</sup></a>')
      .appendTo('#notes')
      .append( '&nbsp;(<a href="#context-' + (index+1) + '">
                                                      context </a>)' )
      .wrap('<li id="foot-note-' + (index+1) + '"></li>');
  });
});

Now each of the <li> elements comes complete with an id that matches the marker’s href. At last, we have a set of numbered, linked footnotes:

Of course...