欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

insertBefore方法讲解,及如何实现insertAfter方法?

程序员文章站 2022-05-18 08:38:21
js原生方法insertBefore用于在某个元素之前插入新元素 定义: Node.insertBefore() 方法在参考节点之前插入一个节点作为一个指定父节点的子节点。...

js原生方法insertBefore用于在某个元素之前插入新元素

定义:

Node.insertBefore() 方法在参考节点之前插入一个节点作为一个指定父节点的子节点。

语法: parentElement.insertBefore(newElement, referElement)

值得注意的是

1. 如果要插入的newElement已经在DOM树中存在,那么执行此方法会将该节点从DOM树中移除。

2. 如果referElement为null,那么`newElement会被添加到父节点的子节点末尾

既然JS原生不存在insertAfter方法,要如何实现该功能呢?

元素节点还有一个属性: nextSibling,即指向元素的下个兄弟元素,如果已经是末尾子节点则为null。

基于以上,就可以实现insertAfter功能

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}