javascript编写insertAfter方法

我们知道javascript中有appendChild方法和insertBefore方法，但是却没有insertAfter方法。当然，在JQuery中是有的。

本文用javascript实现insertAfter方法。

一。首先，我们知道appendChild方法的语法规则是：

parent.appendChild(child)

作用：在父节点内部的尾部添加一个子节点。

二。而insertBefore方法的语法规则是：

parentElement.insertBefore(newElement,targetElement)

1-newElement:你想插入的新元素

2-targetElement:你想把这个新元素插入到哪个元素之前

3-parentElement:目标元素（targetElement:）的父元素

三。编写insertAfter函数

利用appendChild和insertBefore来编写我们的insertAfter函数

function insertAfter (newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElment){
        parent.appendChild(newElement)
    }else{
        parent.insertBefore(newElement,targerElement.nextSibling)
    }
}

思路：

       1，首先，这个函数有两个参数：一个是将被插入的新元素，另一个是目标元素。也就是newElement和targetElement。

        2，把目标元素的parentNode保存到变量parent里。

        3，检查目标元素是不是parent的最后一个子元素。

        4，如果是，就用appendChild方法把新元素追加到parent元素上，这样新元素就恰好被插入到目标元素之后。

        5，如果不是，就把新元素插入到目标元素和目标元素的下一个兄弟元素之间。目标元素的下一个兄弟元素即目标元素的nextSibling属性。用insertBefore方法把新元素插入到目标元素的下一个兄弟之前。