js插入元素的兩個坑

js有著完善的DOM控制方法,但是完善並非完美。

坑一

當我們使用Node.nextSibling時,它並不一定找的是下一個元素,而很可能是文本節點。

這時你可能會發現,你應該使用Element.nextElementSibling

坑二

當我們想往指定的地方插入元素時,我們會發現有insertBefore()可以,它的作用是往父元素內指定的子元素前面插入新的元素。

但是,完善的js竟然不提供insertAfter。於是我們就只能自己寫:

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

Leave a Comment