JS 封装inserAfter()方法

封装insertAfter()方法

在JS中，系统提供了Node.insertBefore(a, b)方法，在参考节点b之前插入一个拥有指定父节点Node的子节点a。

我们可以封装一个类似insertBefore()的函数 inertAfter(a, b)，实现在参考节点b之后插入一个拥有指定父节点Node的子节点a。

思路：获取参考节点afterNode的下一个元素节点，利用insertBefore操作完成相应功能

//在原型上进行封装
Element.prototype.insertAfter = function(targetNode, afterNode){
// 获取afterNode节点的下一个元素节点
var beforeNode = afterNode.nextElementSibling;

// 处理afterNode为最后一个子元素的情况
if(beforeNode == null){
this.appendChild(targetNode);
}else{
this.insertBefore(targetNode, beforeNode);
}
}

eg：若HTML代码如下所示

<div>
<p></P>
<b></b>
<i></i>
</div>

若要在后插入标签，先获取父节点和参考节点；然后创建子节点strong。

var div = document.getElementsByTagName('div')[0];
var b = doucment.getElementsByTagName('b')[0];

var strong = document.createElement('strong');

div.insertAfter(strong, b);
console.log(div);

控制台输出如下

<div>
<p></P>
<b></b>
<strong></strong>
<i></i>
</div>