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 相关文章推荐
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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
解析PHP的session过期设置
2013/06/29 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
js如何验证密码强度
2020/03/18 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python妙用之编码的转换详解
2017/04/21 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
人力资源管理专业学生自我评价
2013/11/20 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
化妆品活动策划方案
2014/05/23 职场文书
支部书记四风对照材料
2014/08/28 职场文书
人事代理委托书
2014/09/27 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书