JavaScript insertAfter(): 在现有节点之前插入新节点。

摘要: 在本教程中，您将学习如何将新节点作为父节点的子节点插入到现有节点之后。

本教程是在 DOM API 不支持after()方法时编写的。现在，您可以使用after()方法在元素之后插入节点。

JavaScript DOM 提供了insertBefore()方法，允许您将新节点作为子节点插入到现有节点之后。

要将新节点作为子节点插入到现有节点之后，您可以使用以下方法

首先，选择现有节点的下一个兄弟节点。
然后，选择现有节点的父节点，并在父节点上调用insertBefore()方法，在该直接兄弟节点之前插入新节点。

以下insertAfter()函数说明了逻辑

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

假设您有以下项目列表

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

以下是在最后一个列表项之后插入新节点

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

// insert a new node after the last list item
insertAfter(li,  menu.lastElementChild);Code language: JavaScript (javascript)

工作原理

首先，使用getElementById()方法按其 id (menu) 选择ul元素。
其次，使用createElement()方法创建一个新的列表项。
第三，使用insertAfter() 方法在最后一个列表项元素之后插入一个列表项元素。

将它们组合在一起。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertAfter() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        function insertAfter(newNode, existingNode) {
            existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
        }

        let menu = document.getElementById('menu');
        // create a new li node
        let li = document.createElement('li');
        li.textContent = 'Services';
        insertAfter(li,  menu.lastElementChild);
    </script>
</body>

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

插入后，菜单如下所示

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

总结

JavaScript DOM 尚未支持insertAfter()方法。
使用insertBefore()方法和nextSibling属性在现有节点之前插入新节点作为父节点的子节点。

本教程对您有帮助吗？