如何添加一个 HTML 元素，使其从一个元素之后开始，并在另一个元素之前结束?

htmlweb developmentfront end technology更新于 2024/4/25 2:20:17

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

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

使用 insertBefore() 方法

Node 接口的 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>

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

示例

执行以下脚本并观察如何使用 insertBefore() 添加 HTML 元素。

<!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 元素将被插入。