JavaScript after 指定元素插入一个或多个元素

您将学习如何使用 JavaScript after 方法在指定元素后面插入节点元素

January 03, 2024

4 min read

dom JavaScript 教程

在本教程中，您将学习如何使用 JavaScript after 方法在指定元素后面插入节点元素。

JavaScript after 方法简介

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

after 方法语法如下所示：

Element.after(node)

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

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

h1.after(p)

要在元素后插入多个节点，请将多个节点 node 传递给 after() 方法，如下所示：

Element.after(node1, node2, ... nodeN)

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

Element.after(str1, str2, ... strN)

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

JavaScript after 在元素后面插入节点元素

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

<!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>

代码是如何运行的。

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

 const h1 = document.querySelector('h1');

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

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

第三、在 <h1> 元素后面插入 <p> 元素：

h1.after(p);

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>

代码是如何运行的：

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

 const list = document.querySelector('ul');

其次，定义一个字符串数组。在实践中，您可以通过 API 调用获取它。

const libs = ['React', 'Meteor', 'Polymer'];

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

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

最后，在 ul 元素的最后一个子元素之后插入 li 元素的列表：

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

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

<ul>
    <li>Angular</li>
    <li>Vue</li>
    <li>React</li>
    <li>Meteor</li>
    <li>Polymer</li>
</ul>

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

JavaScript after 插入字符串

当您在 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>