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>