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