《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.8　技巧：使用prepend()和prependTo()添加内容

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对象以及函数。