insertBefore的用法

小鱼儿 2022-02-22 06:11 228阅读 0赞

### 文章目录 ###

*  简介
 *  用法
 *   *  参数
 *  注意的地方

# 简介 #

`inserBefore`，顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法是：

> Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点

**而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用`insertBefore`方法的节点。**

如果给定的子节点是对文档中**现有节点的引用**，insertBefore()会将其**从当前位置移动到新位置。**

如果给定的子节点是DocumentFragment，那么DocumentFragment的**全部内容**将被移动到指定父节点的子节点列表中。

如果引用节点为空，则将指定的节点添加到指定父节点的子节点列表的末尾。（理论上）

# 用法 #

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

## 参数 ##

*  `newNode`：将要插入的节点
 *  `referenceNode`：被参照的节点（即要插在该节点之前）
 *  `insertedNode`：插入后的节点
 *  `parentNode`：父节点

因为`insertedNode`是插入后的节点，所以它与`newNode`是同一个节点。例如：

<body>
    	<div>
    		<p class="p1" id="p1">这是P1</p>
    		<p class="p2" data-name="p2">这是p2</p>
    	</div>
    	<p id="p3">这是p3</p>
    	<script>
    		let div = document.getElementsByTagName('div')[0];
    		let p2 = document.getElementsByClassName('p2')[0];
    		let p1 = document.getElementById('p1');
    		let p3 = document.getElementById('p3');
    
    		let returnDom = div.insertBefore(p2,p1);
    		console.log(returnDom === p2);
    	</script>
    </body>

上面代码中输出的结果为`true`。

# 注意的地方 #

1.  W3C文档中关于`referenceNode`参数的描述是可选的。而在实际中却不是这样，MDN文档的描述如下：

> referenceNode引用节点不是可选参数——你必须显式传入一个 Node 或者 null。如果不提供节点或者传入无效值，在不同的浏览器中会有不同的表现。

在Chrome浏览器下，如果不指定`referenceNode`的话，将会报错。

![在这里插入图片描述][2019040900095742.png]

当传入`null`时，新插入的元素将会插入到父元素的子元素列表末尾。

1.  `refernenceNode`必须是父元素的子元素，如果不是的话，也会报错：  
    ![在这里插入图片描述][20190409001232143.png]

[2019040900095742.png]: /images/20220222/05b9307671ff49a49da8aaf0f4107e2f.png
[20190409001232143.png]: /images/20220222/ee04a5bb7e5241a48feca183d1d7512f.png