jQuery 移动（包装）元素 （insertBefore）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" src="jquery-1.5.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// $('span.footnote').insertBefore('#footer');
$('<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( ' (<a href="#context-' + (index+1) + '">context</a>)' )
.wrap('<li id="foot-note-' + (index+1) + '"></li>');
});
});
</script>
<style type="text/css">
span.footnote {
font-style: italic;
font-family: "Times New Roman", Times, serif;
display: block;
margin: 1em 0;
}
.chapter span.footnote {
display: inline;
}
.text-reference {
font-weight: bold;
}
#notes li {
margin: 1em 0;
}
#notes {
margin-top: 1em;
border-top: 1px solid #dedede;
}
#footer {
margin-top: 1em;
border-top: 1px solid #dedede;
}
</style>
</head>
<body>
<div class="chapter">
<p>Rarely—in proportion to the vast numbers of Isosceles births—is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. <span class="footnote">"What need of a certificate?" a Spaceland critic may ask: "Is not the procreation of a Square Son a certificate from Nature herself, proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular.</span> Such a birth requires, as its antecedents, not only a series of carefully arranged intermarriages, but also a long-continued exercise of frugality and self-control on the part of the would-be ancestors of the coming Equilateral, and a patient, systematic, and continuous development of the Isosceles intellect through many generations.</p>
<p><span class="pull-quote">The birth of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span class="drop">for many furlongs round</span>.</span> After a strict examination conducted by the Sanitary and Social Board, the infant, if certified as Regular, is with solemn ceremonial admitted into the class of Equilaterals. He is then immediately taken from his proud yet sorrowing parents and adopted by some childless Equilateral. <span class="footnote">The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon his relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again into his hereditary level.</span></p>
<p>How admirable is the Law of Compensation! <span class="footnote">And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States of Flatland!</span> By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle, taking advantage of the irrepressible and boundless hopefulness of the human mind.…</p>
</div>
<div id="footer">
<p>Read the <a href="complete" _mce_href="http://web.archive.org/web/20050208012252/http://www.ibiblio.org/eldritch/eaa/FL.HTM">complete">http://web.archive.org/web/20050208012252/http://www.ibiblio.org/eldritch/eaa/FL.HTM">complete text of <i>Flatland</i></a>. Learn about the upcoming <a href="Flatland" _mce_href="http://www.flatlandthemovie.com/">Flatland">http://www.flatlandthemovie.com/">Flatland movie</a>.</p>
</div>
</body>
</html>
浙公网安备 33010602011771号