HTML | DOM insertBefore() 方法(1)

📌 相关文章

📜 HTML | DOM insertBefore() 方法(1)

📅 最后修改于: 2023-12-03 15:15:35.276000 🧑 作者: Mango

HTML | DOM insertBefore() 方法

简介

insertBefore() 方法用于在指定节点的子节点列表中插入新的子节点。该方法接受两个参数：要插入的新节点和它的参考节点，新节点将被插入到参考节点之前。

语法

parentElement.insertBefore(newElement, refElement);

parentElement：要插入新节点的父元素。
newElement：要插入的新节点。
refElement：参考节点，新节点将被插入到它的前面。

示例

下面是一个简单的示例，演示了如何使用 insertBefore() 方法在段落中插入新的文本节点：

<!DOCTYPE html>
<html>
<head>
	<title>insertBefore() 方法示例</title>
</head>
<body>
	<p id="myParagraph">这是一个段落。</p>

	<script>
		var para = document.getElementById("myParagraph");
		var node = document.createTextNode("这是一个新的文本节点。");

		para.insertBefore(node, para.childNodes[0]);
	</script>
</body>
</html>

在这个示例中，我们首先获取了一个 id 为 myParagraph 的段落元素。然后，我们创建了一个新的文本节点，并将它的内容设置为“这是一个新的文本节点。”接下来，我们使用 insertBefore() 方法将该新节点插入到段落的子节点列表中，它将成为第一个子节点。

总结

insertBefore() 方法是一个非常有用的 DOM 方法，它允许我们以编程方式向 Web 页面中添加新的元素。我们可以使用它将新节点插入到任意位置，从而改变元素的视觉外观和行为。如果你想要深入了解 DOM 编程，请参考 MDN 网站上的相应文档。