JavaScript insertBefore

JavaScript insertBefore() 方法用于在指定父节点下，将一个子节点插入到另一个节点之前。

在本节中，我们将学习 insertBefore() 方法，并通过一个示例来理解 insertBefore() 方法的实现。

JS insertBefore() 方法

如果我们想在父节点的另一个节点之前添加一个节点（子节点），则使用 insertBefore() 方法。

语法

在上面的语法中，parentNode 是要插入新子节点的指定父节点。其中，newNode 表示将要被插入到另一个节点之前的节点，而 existingNode 表示新子节点将被插入到其之前的节点。如果 existingNode 的值为 null（即不存在），则新节点将被插入到 parentNode 的子节点末尾。

insertBefore() 函数如何工作

该方法遵循以下步骤：

• 首先，该方法在代码中搜索指定的父节点。
• 然后，它查找 existingNode 的值，看其是否存在于父节点中。
• 如果未找到用户希望在其之前插入新节点的 existingNode，则该方法返回 null。
• 接下来，如果 existingNode 存在于指定的父节点中，则该方法将 newNode 插入到 existingNode 之前，并返回插入的子节点。

insertBefore() 方法示例

以下是一个示例代码，可以帮助我们理解 insertBefore() 方法的工作原理。

上述代码的输出如下所示

在上面的代码中

上面的代码是基于 HTML 和 JavaScript 的代码。

首先，我们创建了一个无序列表，并为其指定了 id="weeks"。该列表包含一些用 <li> 元素 括起来的项。

• 在 <script> 部分，我们首先获取了 <ul> 的 id，然后创建了一个要添加到父节点的新子元素。这里，父节点是 <ul>，其中的列表项是它的子元素。此外，这个新节点就是 newNode 的值。
• 然后，我们为创建的新节点提供了 "Tuesday" 的值。
• 最后，我们使用 insertBefore() 方法在代码中找到指定的父节点，然后在指定的父节点中搜索指定的 existing 子元素是否存在。
• 接下来，它成功地在无序列表中找到了现有的列表项（子节点），因此它将新的子节点值，即新的列表项，插入到现有子节点值之前。
• 最后，insertBefore() 方法将返回已被放置为 newNode 值的列表项。
• 但是，如果我们尝试在方法中放入一个不存在的节点值，该方法将再次搜索该值，但找不到这样的值。因此，它将返回 null。

这样，我们就可以在一个指定的父节点中插入一个子节点，并将新节点插入到现有子节点之前。