insertBefore()

介绍

insertBefore()是JavaScript中的一种方法，可以将一个元素插入到另一个元素的前面。

此方法需要两个参数：要插入的元素和将其插入的目标元素。它还可以通过可选的第三个参数来指定插入的位置。

用法

parentNode.insertBefore(newNode, existingNode)

• parentNode：要插入新元素的父元素。
• newNode：要插入到parentNode中的新元素。
• existingNode：将newNode插入到其前面的现有节点。如果该参数为null，则将newNode插入到parentNode的末尾。

parentNode.insertBefore(newNode, existingNode.nextSibling)

• nextSibling：要插入newNode的现有节点的下一个兄弟节点。

注意：在使用insertBefore()时，必须首先用parentNode获取到要插入新元素的集合。

示例

<ul id="myList">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

// 创建新元素
var newLi = document.createElement("li");
var textNode = document.createTextNode("新的列表项");
newLi.appendChild(textNode);

// 获取目标元素
var existingLi = document.getElementsByTagName("li")[1];

// 插入新元素
var parentUl = document.getElementById("myList");
parentUl.insertBefore(newLi, existingLi);

此示例将在第二个列表项之前插入一个新的列表项。

结论

insertBefore()是一种强大的JavaScript方法，可以将元素插入到DOM中的特定位置。通过指定插入的位置，可以使DOM的结构更加灵活。