JavaScript after(): 在元素后插入节点

摘要：在本教程中，您将学习如何使用 JavaScript after() 方法在元素后插入节点。

JavaScript after() 方法简介

after() 是 Element 类型的方法。element.after() 方法允许您在 element 后插入一个或多个节点。

以下是 after() 方法的语法

Element.after(node)Code language: JavaScript (javascript)

在此语法中，after() 方法将在 DOM 树中的 Element 后插入节点。

例如，假设您有一个 <h1> 元素，并且您想要在它后面插入一个 <p> 元素，您可以像这样使用 after() 方法

h1.after(p)Code language: JavaScript (javascript)

要在元素后插入多个节点，将节点作为参数传递给 after() 方法，如下所示

Element.after(node1, node2, ... nodeN)Code language: JavaScript (javascript)

after() 方法也接受一个或多个字符串。在这种情况下，after() 方法将字符串视为 Text 节点

Element.after(str1, str2, ... strN)Code language: JavaScript (javascript)

after() 方法返回 undefined。如果无法插入节点，则会抛出 HierarchyRequestError 异常。

JavaScript after() 示例

让我们来看一些使用 JavaScript after() 方法的示例。

1) 使用 JavaScript after() 在元素后插入节点

以下示例使用 after() 方法在 <h1> 元素后插入一个段落

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - after()</title>
    </head>

    <body>
        <h1>JavaScript DOM - after()</h1>

        <script>
            const h1 = document.querySelector('h1');

            // create a new paragraph element
            const p = document.createElement('p');
            p.innerText = 'This is JavaScript DOM after() method demo';

            // insert the paragraph after the heading
            h1.after(p);
        </script>
    </body>

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

工作原理。

首先，使用 querySelector() 方法获取标题元素

 const h1 = document.querySelector('h1');Code language: JavaScript (javascript)

其次，创建一个新的段落元素并设置其 innerText

const p = document.createElement('p');
p.innerText = 'This is JavaScript DOM after() method demo';Code language: JavaScript (javascript)

第三，在 <h1> 元素后插入 <p> 元素

h1.after(p);Code language: JavaScript (javascript)

2) 使用 JavaScript after() 在元素后插入多个节点

以下示例使用 after() 方法在元素后插入多个节点

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - after()</title>
    </head>
    <body>
        <ul>
            <li>Angular</li>
            <li>Vue</li>
        </ul>
        <script>
            const list = document.querySelector('ul');

            const libs = ['React', 'Meteor', 'Polymer'];
            const items = libs.map((lib) => {
                const item = document.createElement('li');
                item.innerText = lib;
                return item;
            });

            list.lastChild.after(...items);

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

工作原理

首先，使用 querySelector() 方法选择 ul 元素

 const list = document.querySelector('ul');Code language: JavaScript (javascript)

其次，定义一个字符串数组。在实际应用中，您可能会从 API 调用中获取它。

 const libs = ['React', 'Meteor', 'Polymer'];Code language: JavaScript (javascript)

第三，使用 map() 方法将字符串数组转换为 li 元素数组

const items = libs.map((lib) => {
  const item = document.createElement('li');
  item.innerText = lib;
  return item;
});Code language: JavaScript (javascript)

最后，将列表项元素插入到 ul 元素的最后一个子元素之后

list.lastChild.after(...items);Code language: JavaScript (javascript)

请注意，...items 使用展开运算符展开 items 数组的元素。

ul 元素将如下所示

<ul>
    <li>Angular</li>
    <li>Vue</li>
    <li>React</li>
    <li>Meteor</li>
    <li>Polymer</li>
</ul>Code language: HTML, XML (xml)

最后三个项目（React、Meteor 和 Polymer）插入到项目 Vue 之后，而 Vue 是 <ul> 元素的最后一个子元素。

3) 使用 JavaScript after() 插入字符串

当您在 after() 方法中使用字符串时，它会将它们视为 Text 节点。例如

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - after()</title>
        <style>
            button {
                padding: 0.75em 1em;
                background-color: #F7DF1E;
                color: #000;
                cursor: pointer;
                border-radius: 50vw;
            }
        </style>
    </head>
    <body>
        <button>Donate Here</button>
        <script>
            const button = document.querySelector('button');
            button.firstChild.after(' 🧡');

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

总结

使用 element.after() 方法在元素后插入一个或多个节点。

测验

本教程对您有帮助吗？