本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.8节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看
prepend()和prependTo()函数的工作方式几乎同append()和appendTo()函数一样。“在后添加”(append)方式是把新内容放置在选中元素的后面,而以“在前添加”(prepend)方式是把新内容放置在前面。代码清单3-8演示了prepend()和prependTo()函数的用法。
代码清单3-8 演示prepend()和prependTo()之间的区别
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>Difference between prepend() and prependTo()</title> 05 </head> 06 <body> 07 08 <div id="prepend-placeholder"> 09 <p>This content is for reference</p> 10 </div> 11 12 <button id="prepend">append()</button><br> 13 14 <div id="prepend-to-placeholder"> 15 <p>This content is for reference</p> 16 </div> 17 18 <button id="prepend-to">prependTo()</button><br> 19 20 <script src="http://code.jquery.com/jquery-latest.min.js"></script> 21 22 <script> 23 // 请将下列代码移至一个外部的.js文件中 24 $(document).ready(function() { 25 26 $('#prepend').click(function() { 27 $('#prepend-placeholder').prepend('<p>Test prepend</p>'); 28 }); 29 30 $('#prepend-to').click(function() { 31 $('<p>Test prependTo()</p>').prependTo('#prepend-to-placeholder'); 32 }); 33 34 }); 35 </script> 36 </body> 37 </html>第9行和第15行是帮助识别“在前添加”的文本内容,可以看到添加的内容位于所有已经存在的元素之前。同append()和appendTo()函数一样,prepend()和prependTo()函数的参数可以是DOM元素、HTML字符串、jQuery对象以及函数。