本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.12节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
3.12 技巧：在指定的位置插入元素
append()、appendTo()、prepend()和prependTo()函数是以选取已存在的元素为基准插入新内容的。有时候，想新建的元素是兄弟元素而不是子元素。代码清单3-12演示了实现该功能的一种可选方法。
代码清单3-12 在一组按钮之前和之后插入元素
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>The after(), before(), insertAfter()
05 and insertBefore() function</title>
06 </head>
07 <body>
08
09 <h2>Click on the buttons to see the result of each
10 function</h2>
11
12 <div id="target">
13
14 <button id="before">before()</button><br>
15 <button id="after">after()</button><br>
16 <button id="insert-before">insertBefore()</button><br>
17 <button id="insert-after">insertAfter()</button>
18
19 </div>
20
21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
22
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26
27 $('#before').click(function() {
28 $('#target').before('<p>Before</p>');
29 });
30 $('#after').click(function() {
31 $('#target').after('<p>After</p>');
32 });
33 $('#insert-before').click(function() {
34 $('<p>Insert Before</p>').insertBefore('#target');
35 });
36 $('#insert-after').click(function() {
37 $('<p>Insert After</p>').insertAfter('#target');
38 });
39
40 });
41 </script>
42 </body>
43 </html>
after()和insertAfter()的区别与append()和appendTo()的区别一样。如果点击了按钮并看过了代码示例，你会发现它们的行为结果是相同的。正如预期的一样，before()是把元素插入到已选取元素的前面。请注意这些函数的参数与append()和prepend()是一样的，即可以是DOM元素、HTML字符串、jQuery对象以及函数。
