📌  相关文章
📜  js insertbefore - Javascript (1)

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

Javascript中的insertBefore方法

Javascript中的insertBefore方法可以用于将一个元素插入到另一个元素之前，包括文本和元素节点。该方法需要传入两个参数：要插入的元素和已有元素。

语法
parentElement.insertBefore(newElement, existingElement);
  • parentElement：已有元素的父元素
  • newElement：要插入的新元素
  • existingElement：已有元素，newElement将会在这个元素之前插入
示例

下面是一个简单的例子来演示如何使用insertBefore方法：

<!DOCTYPE html>
<html>
<head>
	<title>insertBefore example</title>
</head>
<body>
	<ul id="myList">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 4</li>
	</ul>

	<script>
		var newItem = document.createElement("LI");
		var textNode = document.createTextNode("Item 3");

		newItem.appendChild(textNode);

		var list = document.getElementById("myList");
		var existingItem = list.childNodes[2];

		list.insertBefore(newItem, existingItem);
	</script>
</body>
</html>

在这个例子中，我们首先使用document.createElement方法创建一个新的li元素，并使用document.createTextNode方法创建文本节点。将这两个元素组合在一起，最终创建了一个带有文本的新元素。

我们然后获取现有的列表，以及该列表中具有特定位置的元素（在这个例子中是第3个元素）。在list变量中使用insertBefore方法将新元素插入到这个元素之前。

这个例子最终的结果是，列表中可以看到我们刚插入的新元素：

  • Item 1
  • Item 2
  • Item 3
  • Item 4
总结

insertBefore方法是Javascript中用于将新元素插入到现有元素之前的功能强大的方法之一。通过指定要插入的新元素和应该在哪个现有元素之前插入，我们可以轻松地在网页上创建动态的、具有交互性的元素和控件。