insertBefore的用法

时间：2024-10-22 10:52:51

文章目录

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

简介

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

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

而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用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的话，将会报错。

在这里插入图片描述

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

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

相关文章