在JQ中提供了两种将元素插入到其他元素前面的方法：.insertBefore()和.before()。这两种方法作用相同，只是连缀的方式不同（即 位置不同）
before（content） 在每个匹配的元素之前插入内容。
content：插入到每个目标前的内容。
$(A).before(B); ——把B插入到A前
insertBefore（expr）：把所有匹配的元素插入到另一个、指定的元素集合前。（与before()
用法相反）
expr（String）:用于匹配元素的JQ表达式
$(A).insertBefore(B); ——把A插入到B前面
insertAftet（）和after（）：将元素插入到其他元素后面。（用法与以上两种方法基本相同）
以下是代码演示
HTML
1<html xmlns="http://www.w3.org/1999/xhtml">
2<head runat="server">
3 <title></title>
4
5 <script type="text/javascript" src="JS/jquery.js"></script>
6 <script type="text/javascript" src="JS/alice.js"></script>
7 <link href="css/alice.css" rel="stylesheet" type="text/css" />
8
9</head>
10<body>
11 <form id="form1" runat="server">
12 <div id="container">
13 <h1>Through the LookingGlass</h1>
14 <div class="author">by Lewis Carroll</div>
15 <div class="chapter" id="chapter1"></div>
16 <h2 class="chaptertitle">1.LookingGlass House</h2>
17 <%-- <p>There was a book lying near Alice on the table,and while she sat watching the White King--%>
18 <span class="spoken">I don't know,</span>she said to herself.</p>
19 <%-- <p>It was like this.</p>--%>
20 <div class="poem">
21 <h3 class="poemstanza">YKCOWREBBAJ</h3>
22 <div class="poemstanza">
23 <div>sevot yhtils eht dna,gillirb sawT'</div>
24 <div>;ebaw eht ni elbmig dna eryg diD</div>
25 <div>,sevogorob eht erew ysmim llA</div>
26 <div>.ebargtuo shtar emom eht dna</div>
27 </div>
28 </div>
29
30 <%-- <p>There was a book lying near Alice on the table,and while she sat watching the White King
31 <span class="spoken">I don't know,</span>she said to herself.</p>--%>
32
33 <%-- <p>It was like this.</p>--%>
34 <div class="poem">
35 <h3 class="poemstanza">YKCOWREBBAJ</h3>
36 <div class="poemstanza">
37 <div>sevot yhtils eht dna,gillirb sawT'</div>
38 <div>;ebaw eht ni elbmig dna eryg diD</div>
39 <div>,sevogorob eht erew ysmim llA</div>
40 <div>.ebargtuo shtar emom eht dna</div>
41 </div>
42 </div>
43 </div>
44
45 <ul id="selectedplays">
46 <li>Comedies
47 <ul>
48 <li><a href="http://www.mysite.com/asyoulikeit/">As You Like It</a></li>
49 <li>All's Well That Ends Well</li>
50 <li>A Midsummer Night's Dream</li>
51 <li>Twelfth Night</li>
52 </ul>
53 </li>
54 <li>Tragedies
55 <ul>
56 <li><a href="hamlet.pdf">Hamlet</a></li>
57 <li>Macbeth</li>
58 <li>Romeo and Juliet</li>
59 </ul>
60 </li>
61 <li>Histories
62 <ul>
63 <li>Henry IV(<a href="mailto:henryiv@king.co.uk">email</a>)</li>
64 <ul>
65 <li>Part I</li>
66 <li>Part II</li>
67 </ul>
68 <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
69 <li>Richard II</li>
70 </ul>
71 </li>
72 </ul>
73 <br />
74 <table>
75 <tr>
76 <th>Title</th>
77 <th>Category</th>
78 <th>Year Published</th>
79 </tr>
80 <tr>
81 <td>As You Like It</td>
82 <td>Comedy</td>
83 <td></td>
84 </tr>
85 <tr>
86 <td>All's Well that Ends Well</td>
87 <td>Comedy</td>
88 <td>1601</td>
89 </tr>
90 <tr>
91 <td>Hamlet</td>
92 <td>Tragedy</td>
93 <td>1599</td>
94 </tr>
95 <tr>
96 <td>Macbeth</td>
97 <td>Tragedy</td>
98 <td>1064</td>
99 </tr>
100 <tr>
101 <td>Romeo and Juliet</td>
102 <td>Tragedy</td>
103 <td>1606</td>
104 </tr>
105 <tr>
106 <td>Henry IV,Part I</td>
107 <td>History</td>
108 <td>1595</td>
109 </tr>
110 <tr>
111 <td>Henry V</td>
112 <td>History</td>
113 <td>1599</td>
114 </tr>
115 </table>
116
117 <%-- <div id="switcher">
118 <h3>Style Switcher</h3>
119 <div class="button selected" id="switcher-normal">Normal</div>
120 <div class="button" id="switcher-narrow">Narrow Column</div>
121 <div class="button" id="switcher-large">Large Print</div>
122 </div>--%>
123
124 <div class="foo">
125 <span class="bar"><a href="http://www.example.com/">The quick brown fox jumps over the lazy dog.</a></span>
126 <%--<p>How razorback-jumping frogs can level six piqued gymnasts!</p>--%>
127 </div>
128
129 <div id="switcher">
130 <div class="label">Style Switcher</div>
131 <div class="button" id="switcher-large">Increase Text Size</div>
132 <div class="button" id="switcher-small">Decrease Text Size</div>
133 </div>
134 <div class="speech">
135 <%-- <p>Fourscore and seven years ago our fathers brought forth on this continent a new nation,conceived in liberty,
136 and dedicated to the proposition that all men are created equal.<span class="more"></span></p>
137 <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
138 can long</p>
139 <p>The brave men, living and dead, who struggled here have consecrated it ,far above our poor power to add or detract</p>
140 <p>It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take</p>--%>
141 </div>
142
143 <h1 id="f-title">Flatland:A Romance of Many Dimensions</h1>
144 <div id="f-author">by Edwin A. Abbott</div>
145 <h2>Part 1,Section 3</h2>
146 <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
147 <div id="excerpt">an excerpt</div>
148
149 <div class="chapter">
150 <p class="square">Our Professional Men and Gentlemen are Squares(to which class I Myselt belong) and Five-Sided Figures or
151 <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a></p>
152 <p class="nobility hexagon">Next above these come the Nobility,of whom there are <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagon</a>and from thence<a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>,or many-sided.Finally when the<a href="http://en.wikipedia.org/wiki/Circle">Circle</a></p>
153 <p><span class="pull-quote">It is a <span class="drop">Law of Nature></span>With us that a male child<strong>one more side</strong>than his father</span>,so that each generation shall rise</p>
154 </div>
155 </form>
156</body>
alice.js
Code
$(document).ready(function(){
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');<==>$('div.chapter p').after('<a href="#top">back to top</a>');//等价的
$('<a id="top"></a>').prependTo('body');
});
prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。（在这个例子中当点击back to top 时会跳到这个页面最开始的位置 相当于锚）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
