JavaScript before 指定元素之前插入元素与标签

时间：06-10来源：作者：点击数：30

在本教程中，您将学习如何使用 JavaScript before 方法在元素之前插入节点元素或者标签。

JavaScript before 方法简介

element.before() 方法允许您在指定的元素 Element 之前插入一个或多个标签节点。before() 方法的语法如下所示：

Element.before(node)

在此语法中，before() 方法将节点插入到 DOM 树中的 Element 之前。

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

p.before(h1)

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

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

此外，before() 方法接受一个或多个字符串而不是节点。在这种情况下，before() 方法将字符串视为 Text 节点：

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

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

JavaScript before 在元素之前插入节点

下面的示例使用 before 在 <p> 元素之前插入 <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 - before()</title>
    </head>

    <body>

        <p>This is JavaScript DOM before() method demo.</p>

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

            // create a new h1 element
            const h1 = document.createElement('h1');
            h1.innerText = 'JavaScript DOM - before()';

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

</html>

代码是如何运行的。

首先，使用 querySelector 方法获取 <p> 元素：

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

其次，创建一个新的标题元素 <h1> 并设置 h1元素的 innerText 属性：

const h1 = document.createElement('h1');
h1.innerText = 'JavaScript DOM - before()';

第三，在 <p> 元素之前插入 <h1> 元素：

p.before(h1);

before 在元素前插入多个节点

以下示例使用 before 方法在元素前插入多个节点：

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript DOM - before()</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.firstChild.before(...items);

        </script>
    </body>

</html>

代码是如何运行的：

首先，使用以下 document 的方法 querySelector 方法选择 ul 元素：

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

其次，定义一个字符串数组。

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

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

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

最后，在 ul 元素的第一个子元素之前插入元素：

list.firstChild.before(...items);

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

最终的 <ul> 元素将如下所示：

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

前三个子项（React、Meteor 和 Polymer）被插入到 Angular 子项之前，Angular 子项是 <ul> 元素的第一个子元素。

JavaScript before 插入字符串

当您在 before 方法中使用字符串时，before() 方法会将它们视为 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 - before()</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.before('🧡 ');

        </script>
    </body>

</html>