本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.6节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
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文档树，从而导致操作变得较慢。
相关资源：敏捷开发V1.0.pptx