[jQuery] involuntary closing of tags

[jQuery] involuntary closing of tags


Hi, I'm new to jQuery, so forgive my ignorance if I've missed
something trivial...
I'm trying to move text enclosed in <div class="footnotes"> to the
bottom of the page, and insert a link to the footnote in the location
it was originally in. However, when the div is moved, the

-tag it
was in gets closed, and any remaining text that was in the

is left
outside. The link I insert is also outside the

. How can I avoid
this?
Here's my code:
<script type="text/javascript">
$(document).ready(function() {
    //put all footnotes into a variable
    var fotNoter = $(".footnote").clone();
    //replace each footnote with a link to the footnote at the bottom of
the page
    $(".footnote").each(function(i) {
    $(this).replaceWith("[" + "<a href='#" + i + "'>" + (i+1) + "</a>" +
"]" );
    });
    //the div with id="footnotes" already exists at the bottom of the
page, insert footnotes into div
    $(fotNoter).appendTo("div#footnotes")
    //print a number in front of each footnote and assign anchor id
    $(fotNoter).each(function(j) {
     $(this).prepend(j+1 + ") ");
     $(this).prepend("<div id='" + j + "'>");
     $(this).append("</div>");
    });
});
</script>
Instead of using replaceWith I also tried
$(this).html("[" + "<a href='#" + i + "'>" + (i+1) + "</a>" + "]" );
and
$(this).before("[" + "<a href='#" + i + "'>" + (i+1) + "</a>" +
"]").remove();
but to no avail...
Any help would be appreciated.
- Carl-Erik