jQuery学习之DOM节点的插入方法总结


Posted in Javascript onJanuary 22, 2017

本文主要总结了jQuery中DOM节点的插入方法,以及各种方法的注意点,下面话不多说,来看看详细的介绍吧。

一、内部插入append()与appendTo()

  • append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。
  • appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

append()appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()前面是要插入的元素内容,而后面是要选择的对象。

$("#bt1").on('click', function() {
 //.append(), 选择表达式在函数的前面,
 //参数是将要插入的内容。
 $(".content").append('<div class="append">通过append方法添加的元素</div>')
 })

 $("#bt2").on('click', function() {
 //.appendTo()刚好相反,内容在方法前面,
 //无论是一个选择器表达式 或创建作为标记上的标记
 //它都将被插入到目标容器的末尾。
 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
 })

二、内部插入prepend()与prependTo()

在元素内部进行操作的方法,除了在被选元素的结尾(仍然在内部)通过append与appendTo插入指定内容外,相应的还可以在被选元素之前插入,jQuery提供的方法是prepend与prependTo

  • .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
  • .prepend()和.prependTo()实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同
  • 对于.prepend() 而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数
  • .prependTo() 正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。
$("#bt1").on('click', function() {
 //找到class="aaron1"的div节点,然后通过prepend在内部的首位置添加一个新的p节点
 $('.aaron1').prepend('<p>prepend增加的p元素</p>')
 })
 $("#bt2").on('click', function() {
 //找到class="aaron2"的div节点,然后通过prependTo内部的首位置添加一个新的p节点
 $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
 })

这里总结下内部操作四个方法的区别:

  • append()向每个匹配的元素内部追加内容
  • prepend()向每个匹配的元素内部前置内容
  • appendTo()把所有匹配的元素追加到另一个指定元素的集合中
  • prependTo()把所有匹配的元素前置到另一个指定的元素集合中

三、外部插入after()与before()

节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容。

  • before与after都是用来对相对选中元素外部增加相邻的兄弟节点
  • 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面
  • 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

注意点:

after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入,before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插。

$("#bt1").on('click', function() {
 //在匹配test1元素集合中的每个元素前面插入p元素
 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
 })
$("#bt2").on('click', function() {
 //在匹配test1元素集合中的每个元素后面插入p元素
 $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})

四、外部插入insertAfter()与insertBefore()

与内部插入处理一样,jQuery由于内容目标的位置不同,然增加了2个新的方法insertAfter与insertBefore

  • .before().insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面
  • .after().insertAfter() 实现同样的功能。主要的不同是语法——特别是(插入)内容和目标的位置。 对于after()选择表达式在函数的前面,参数是将要插入的内容。对于 .insertAfter() , 刚好相反,内容在方法前面,它将被放在参数里元素的后面
  • before、after与insertBefore。insertAfter的除了目标与位置的不同外,后面的不支持多参数处理

注意事项:

  • insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;
  • insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
$("#bt1").on('click', function() {
 //在test1元素前后插入集合中每个匹配的元素,不支持多参数
 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})

$("#bt2").on('click', function() {
 //在test2元素前后插入集合中每个匹配的元素,不支持多参数
 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue实现锚点定位功能
Jun 29 Vue.js
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 #Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 #Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 #Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 #Javascript
You might like
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php日历制作代码分享
2014/01/20 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
婚假请假条怎么写
2014/04/10 职场文书
离婚协议书格式
2014/11/21 职场文书
介绍信模板
2015/01/31 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
python3实现无权最短路径的方法
2021/05/12 Python