before(),after(),prepend(),append()等新DOM方法简介

**1. before() 方法在被选元素前插入指定的内容。类似于jquery的before()方法** Dom中before() 方法是节点方法，可以是节点，也可以是元素， jquery的before()方法的使用： 例： 在每个 p 元素前插入内容 $(“button”).click(function(){$(“p”).before(“

Hello world!

“); }); 元素DOM的before() API还有一个很棒的特性，那就是可以同时插入多个节点内容，例如： document.getElementById(‘img’).before(‘1. 美女’, ’ ‘, ‘2. 美女’); jquery的before方法也可以同时添加多个 区别：在jQuery中，before()的参数值是作为html字符处理的，但是这里的before()是作为text字符处理的。即dom中的使用，不能直接识别标签，会把标签作为文本输出 dom中的before方法有兼容性问题，兼容性对比：http://caniuse.com/#feat=dom-manip-convenience **和insertBefore()比较** insertBefore()作为老牌传统的API，优势在于兼容性好。不足之处，其语法着实很奇怪，A元素插到B元素前面，需要父元素parentNode.insertBefore(newNode, referenceNode)，小辈之间的打打闹闹牵扯到父辈，显然事情就会麻烦。至少这么多年下来insertBefore的参数究竟是新插入节点在前还是先插入节点在后，我都没有准确记清楚。 但是，before() API就不一样了，语法仅涉及到插入节点和相对节点，非常好记，不容易出错，而且API名称更短。 **2. DOM API之after()** after()和before()的语法特性兼容性都是一一对应的，差别就在于语义上，一个是在前面插入，一个是在后面插入。 **3. DOM API之replaceWith()** 语法：ChildNode.replaceWith((节点或字符串)… 更多节点); **4. DOM API之prepend()** ParentNode.prepend((节点或字符串)… 更多节点); **5. DOM API之append()** ParentNode.append((节点或字符串)… 更多节点); **jQuery中append(),prepend()与after(),before()的区别** 一.append()和prepend()的作用 append()用于在被选元素的结尾插入元素。 prepend()用于在被选元素的开头插入元素。 重点在于黑体字——被选元素的， 也就是说这两个函数的添加都是添加到元素的内部的。 看下面的HTML代码

a

使用 append( ) 和 prepend( )添加元素

$(document).ready(function(){$(“#test”).append(“

b

“) //使用append()添加 b 段落
$(“#test”).prepend(“

c

“) //使用 prepend()添加 c 段落
})
效果如下

c

a

b

从上面可以得知，当我们使用 append() 和 prepend()往 id 为 test 的 div 块添加元素时，是添加到 div 内部的。

也就是说，我们添加的元素，成为了 被添加元素 的 子元素。

二. after() 和 before() 的作用
after()用于在被选元素之后插入内容。

before()用于在被选元素之前插入内容。

重点在于黑体字元素之前 ，元素之后。

这意味着这两个函数是往元素外部的前后添加的。

还是刚刚的HTML代码

a

使用 after() 和 before()添加元素。

$(document).ready(function(){$(“#test”).after(“

b

“)
$(“#test”).before(“

c

“)
})

结果如下

c

a

b

从结果可知，after( ) 和 before( ) 往 id=”test“ 的 div块添加元素时，是添加到块外部的。

也就是说，添加的元素，成为了 被添加元素的 兄弟元素。

只要明白 往元素内的前后添加 和 往元素外的前后添加 的区别，就很容易区分了。

来源：http://www.zhangxinxu.com/wordpress/2017/09/js-dom-before-after-replacewith-append-prepend/