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方法把新元素插入到目标元素的下一個兄弟之前。