您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

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

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

结论

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

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门