《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.6　技巧：使用append()和appendTo()添加内容

本节书摘来自异步社区《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 

02 html lang="en" 

03 head 

04 title Difference between append() and appendTo() /title 

05 /head 

06 body 

08 div id="append-placeholder" 

09 /div 

11 button id="append" append() /button br 

13 div id="append-to-placeholder" 

14 /div 

16 button id="append-to" appendTo() /button br 

20 script src="http://code.jquery.com/jquery-1.7.2.min.js" /script 

22 script 

23 // 请将下列代码移至一个外部的.js文件中

24 $(document).ready(function() {

26 $(#append).click(function() {

27 $(#append-placeholder).append( p Test append /p 

28 });

30 $(#append-to).click(function() {

31 $( p Test appendTo() /p ).appendTo(#append-to-placeholder);

32 });

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文档树，从而导致操作变得较慢。

【前端】使用jQuery封装一套UI组件 - 级联选择器组件 本篇文章来讲解下级联选择器组件 级联选择器，在实际项目中也是比较常用的组件，比如：省市区三级关联，上下级联动等 最后面会附上全部代码
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件 本篇文章来讲解下是和否的滑动切换组件 切换滑动组件，使用的场景实际上就是一个开和关的场景，一般有是和否，开和关，禁用和启用等等，只需要设置0和1即可
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件 【首先要声明一点，技术不分好坏，能用好就行，不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始，看到比较新颖的移动端时间选择组件是在某款手机上，分年月日下拉选择，UI界面也挺好看的 除了讲解实现的步骤以及关键点，文章最后面会有完整的代码
【前端】使用jQuery封装一套UI组件 - 单选框 目前前端技术发展非常快，各大厂都开源和分享了自家的前端框架，非常多成熟的UI组件供大家选择，很实用也很方便，给开发上节省了不少时间成本，当然少不了学习成本，不过也不会占用太多时间，只要有前端基础的话，原理基本都是通用的，只是写法不一样。 因此，除了学习现有的优秀前端之外，最好能自己根据原理封装一套自己的UI组件，目的是为了更好的理解前端知识点以及锻炼编程逻辑
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。