本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.6节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
3.6 技巧：使用append()和appendTo()添加内容
html()方法会替换元素的当前内容，因此将由你负责维护当前元素的内容。代码清单3-6演示了如何使用append()和appendTo()添加元素而不影响元素的当前内容。
代码清单3-6 演示append()和appendTo()之间的区别
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>Difference between append() and appendTo()</title>
05 </head>
06 <body>
07
08 <div id="append-placeholder">
09 </div>
10
11 <button id="append">append()</button><br>
12
13 <div id="append-to-placeholder">
14 </div>
15
16 <button id="append-to">appendTo()</button><br>
17
18
19
20 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
21
22 <script>
23 // 请将下列代码移至一个外部的.js文件中
24 $(document).ready(function() {
25
26 $('#append').click(function() {
27 $('#append-placeholder').append('<p>Test append</p>');
28 });
29
30 $('#append-to').click(function() {
31 $('<p>Test appendTo()</p>').appendTo('#append-to-placeholder');
32 });
33
34 </script>
35 </body>
36 </html>
append()和appendTo()之间的主要区别在于：是作用于目标元素而把要添加的HTML字符串作为参数，还是作用于要添加的HTML字符串而把目标元素作为参数。append()函数把内容插入到调用元素之后，如第27行所示；而appendTo()函数则恰好相反，被插入的内容作为选择器参数，如第31行所示。从直观的角度来看，当添加的是jQuery对象时这往往会觉得容易接受一些1。append()和appendTo()函数的参数可以是DOM元素、HTML字符串、jQuery对象和函数。
警告
如果需要添加很多个HTML元素，最好是先把HTML拼成一个长字符串，然后用一次函数调用来添加它。append()和appendTo()函数会影响HTML文档树，从而导致操作变得较慢。
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
