本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.12节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
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对象以及函数。
