JavaScript insertBefore()：在现有节点之前插入新节点

摘要：在本教程中，您将学习如何使用 JavaScript insertBefore() 方法在指定父节点的子节点中，将一个节点插入到另一个节点之前。

JavaScript insertBefore() 方法介绍

要将一个节点作为父节点的子节点插入到另一个节点之前，您可以使用 parentNode.insertBefore() 方法

parentNode.insertBefore(newNode, existingNode);
Code language: CSS (css)

在这个方法中

newNode 是要插入的新节点。
existingNode 是新节点要插入其之前的节点。如果 existingNode 为 null，则 insertBefore() 将在 parentNode 的子节点末尾插入 newNode。

insertBefore() 返回插入的子节点。

JavaScript insertBefore() 辅助函数

以下 insertBefore() 函数将在指定节点之前插入一个新节点

function insertBefore(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode);
}
Code language: JavaScript (javascript)

JavaScript insertBefore() 示例

假设您有以下项目列表

<ul id="menu">
    <li>Services</li>   
    <li>About</li>
    <li>Contact</li>
</ul>
Code language: HTML, XML (xml)

以下示例使用 insertBefore() 方法将新节点作为第一个列表项插入

let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';

// insert a new node before the first list item
menu.insertBefore(li, menu.firstElementChild);Code language: JavaScript (javascript)

工作原理。

首先，使用 getElementById() 方法获取 menu 元素。
其次，使用 createElement() 方法创建一个新的列表项。
第三，使用 insertBefore() 方法将列表项元素插入到 menu 元素的第一个子元素之前。

将它们整合起来。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript insertBefore()</title>
</head>

<body>
    <ul id="menu">
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        // create a new li node
        let li = document.createElement('li');
        li.textContent = 'Home';

        // insert a new node before the first list item
        menu.insertBefore(li, menu.firstElementChild);
    </script>
</body>

</html>
Code language: HTML, XML (xml)

摘要

使用 parentNode.insertBefore() 方法将新节点作为父节点的子节点插入到现有节点之前。

本教程是否有帮助？