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

简介: append()和appendTo()之间的主要区别在于:是作用于目标元素而把要添加的HTML字符串作为参数,还是作用于要添加的HTML字符串而把目标元素作为参数。append()函数把内容插入到调用元素之后,如第27行所示;而appendTo()函数则恰好相反,被插入的内容作为选择器参数,如第31行所示。

本节书摘来自异步社区《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文档树,从而导致操作变得较慢。

相关文章
|
2月前
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
3月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1098 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
112 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
315 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
178 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
116 0
|
JavaScript 前端开发 CDN
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
120 0
手把手教你用jQuery Mobile做相册
|
数据采集 JavaScript 前端开发
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
789 0
|
4月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
32 0

相关产品

  • 云迁移中心