javascript中insertAfter()和insertBefore()函数

最新推荐文章于 2023-01-09 01:38:14 发布

原创最新推荐文章于 2023-01-09 01:38:14 发布 · 6.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #insertAfte #insertBefo

Javascript 同时被 2 个专栏收录

19 篇文章

订阅专栏

JS编程艺术读书笔记

5 篇文章

订阅专栏

本文详细介绍了insertBefore()函数的使用方法，包括如何将新元素插入到目标元素之前，并提供了一个insertAfter()函数的实现示例，展示了如何利用insertBefore()函数和其他DOM操作方法来实现元素的插入。

insertBefore()函数用法：
新元素：你想插入的元素(newElement)
目标元素：你想把这个元素插入到哪个元素(targetElement)
父元素：目标元素的父元素(parentELement)

parentELement.insertBefore(newElement, targetElement)

//利用js提供的insertBefore及过滤器nextSibling\parentNode等

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    //如果要插入的目标元素是其父元素的最后一个元素节点，直接插入该元素
    //否则，在目标元素的下一个兄弟元素之前插入
    if (parent.lastChild == targetElement) {
        parent.appendChild(targetElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}