DOM外部插入after()与before()

Posted 廖利君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM外部插入after()与before()相关的知识,希望对你有一定的参考价值。

DOM外部插入after()与before()

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

选择器的描述:

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

注意点:

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

以上是关于DOM外部插入after()与before()的主要内容,如果未能解决你的问题,请参考以下文章

DOM常用外部插入方法与区别

append()prepend()after()before() 的区别

DOM外部插入insertAfter()与insertBefore()

jQuery学习笔记之DOM树创建新节点append方法

jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法

jQuery 3.0的domManip浅析