HTML DOM insertBefore() 方法

在 Web 开发中，我们经常需要通过 JavaScript 来操作 HTML 文档的 DOM 元素。其中一个常用的方法就是 insertBefore() 方法，它可以在指定的位置插入一个新的子节点。

语法

parentNode.insertBefore(newNode, referenceNode);

• parentNode：要插入新节点的父节点
• newNode：要插入的新节点
• referenceNode：参考节点，新节点将插入到该节点之前

示例

假设我们有一个简单的 HTML 结构如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>insertBefore() 示例</title>
</head>
<body>
    <ul id="myList">
        <li>Apple</li>
        <li>Orange</li>
        <li>Banana</li>
    </ul>
    <button id="myButton">Insert Before</button>
</body>
</html>

现在，我们想在 Apple 和 Orange 之间插入一个新的水果 Grape。我们可以使用 insertBefore() 方法来实现：

// www.javascriptcn.com code example
// 获取父节点和参考节点
var list = document.getElementById('myList');
var referenceNode = list.getElementsByTagName('li')[1];

// 创建新节点
var newNode = document.createElement('li');
newNode.textContent = 'Grape';

// 插入新节点
list.insertBefore(newNode, referenceNode);

在上面的代码中，我们首先获取了父节点 myList 和参考节点 Orange，然后创建了一个新的 li 节点 Grape，最后使用 insertBefore() 方法将 Grape 插入到 Orange 之前。

注意事项

• 如果 referenceNode 为 null，则 newNode 将被插入到父节点的末尾。
• 如果 newNode 已经是父节点的子节点，它将首先被移除，然后再插入到新的位置。

通过 insertBefore() 方法，我们可以灵活地控制 DOM 结构，实现动态的内容插入和排序。希望本文对你有所帮助！