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 <p>-tag it was in gets closed, and any remaining text that was in the <p> is left outside. The link I insert is also outside the <p>. 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