在本教程中,您将学习如何使用 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>

结论

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