极客教程如何在两个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>
当脚本被执行时，它将在网页上生成一个包含列表项和单击按钮的输出。当用户点击按钮时，HTML元素将被插入。