如何在两个HTML元素之间添加一个元素？

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

我们要在本文中执行的任务是添加一个HTML元素，它从一个元素后开始，到另一个元素前结束。为此，我们将使用insertBefore()方法。

使用insertBefore()方法

节点接口的insertBefore()方法将节点作为给定父节点的子节点放置在参考节点之前。如果指定节点已在文档中，则insertBefore()将指定节点移动到新位置。

语法

以下是insertBefore()的语法 –

insertBefore(newNode, referenceNode)

为了更好地了解如何在一个元素后开始，另一个元素前结束添加HTML元素，请查看以下示例。

示例

在以下示例中，我们运行脚本以添加一个HTML元素，该元素从一个元素后开始，到另一个元素前结束。

<!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()方法运行脚本。

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

在运行上述脚本后，会弹出显示在网页上的列表项“cars”，该列表项通过使用insertBefore()方法添加到提供的列表中。

示例

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

<!DOCTYPE html>
<html>
   <body style="background-color:#CCCCFF">
      <h1>单击按钮在猴子之前插入元素</h1>
      <ul id="tutorial">
         <li>猴子</li>
         <li>驴子</li>
      </ul>
      <button onclick="insertelement()">插入元素</button>
      <script>
         function insertelement() {
            var statement= document.createElement("li");
            var add = document.createTextNode("鸽子");
            statement.appendChild(add);
            var list = document.getElementById("tutorial");
            list.insertBefore(statement, list.childNodes[1]);
         }
      </script>
   </body>
</html>