如何在两个现有 HTML 元素之间添加一个新的 HTML 元素？

本文介绍如何在两个已存在的 HTML 元素之间添加一个新的 HTML 元素。这是创建网页时的一项常见任务，可以通过几个简单的步骤实现。我们将使用 JavaScript API 来访问和操作网页上的元素。

本文将要执行的任务是在一个元素之后、另一个元素之前添加一个 HTML 元素。为此，我们将使用 insertBefore() 方法。

使用 insertBefore() 方法

Node 接口的 insertBefore() 方法将一个节点作为给定父节点的子节点放置在参考节点之前。如果该节点已存在于文档中，insertBefore() 会将其转移到新的位置。

语法

以下是 insertBefore() 的语法：

insertBefore(newNode, referenceNode)

为了更好地了解如何在两个现有元素之间添加一个新的 HTML 元素，让我们看下面的例子。

示例

在下面的示例中，我们正在运行一个脚本，用于在两个现有元素之间添加一个新的 HTML 元素。

Open Compiler
<!DOCTYPE HTML>
<html>
   <body>
      <style type="text/css">
         #tutorial {
            background-color: lightblue;
         }
      </style>
      <hr id="tutorial1">
      <p id="tutorial2"> Welcome To TutorialsPoint</p>
      <span>The Best E Learning Platform</span>
      <hr/>
      <script>
         const statement = document.getElementById('tutorial1')
         let next = statement.nextSibling
         const div = document.createElement('div')
         statement.parentNode.insertBefore(div, next)
         div.setAttribute('id', 'tutorial')
         while (next) {
            let node = next
            next = next.nextSibling
            div.appendChild(node)
            if (!next || next.nodeName == 'null') break
         }
      </script>
   </body>
</html>

当脚本执行时，它将生成一个包含文本的输出，该文本将在两个元素之间显示，并应用 CSS 样式并在网页上显示。

示例

考虑下面的示例，我们使用 insertBefore() 方法运行脚本。

Open Compiler
<!DOCTYPE html>
<html>
   <body style="background-color:#E8DAEF">
      <ol id="tutorial">
         <li>RX100</li>
         <li>DUCATI</li>
      </ol>
      <script>
         const tutorial = document.createElement("li");
         const add = document.createTextNode("CARS");
         tutorial.appendChild(add);
         const list = document.getElementById("tutorial");
         list.insertBefore(tutorial, list.children[1]);
      </script>
   </body>
</html>

运行上述脚本后，输出将弹出，显示使用 insertBefore() 方法添加到提供的列表之间的列表项“cars”，并在网页上显示。

示例

执行下面的脚本，观察我们将如何使用 insertBefore() 添加 HTML 元素。

Open Compiler
<!DOCTYPE html>
<html>
   <body style="background-color:#CCCCFF">
      <h1>Click on the button to insert anelement before Monkey</h1>
      <ul id="tutorial">
         <li>Monkey</li>
         <li>Donkey</li>
      </ul>
      <button onclick="insertelement()">Insert Element</button>
      <script>
         function insertelement() {
            var statement= document.createElement("li");
            var add = document.createTextNode("Pegion");
            statement.appendChild(add);
            var list = document.getElementById("tutorial");
            list.insertBefore(statement, list.childNodes[1]);
         }
      </script>
   </body>
</html>

当脚本执行时，它将生成一个包含列表项以及网页上点击按钮的输出。当用户点击按钮时，HTML 元素将被插入。

更新于: 2023年4月21日

123 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告