本文介绍如何在两个现有元素之间添加 HTML 元素。这是创建网页时的常见任务，只需几个简单的步骤即可实现。我们将使用 JavaScript API 来访问和操作网页上的元素。
我们在本文中要执行的任务是在一个HTML元素之后添加另一个元素，然后在另一个元素之前结束。为此，我们将使用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元素将被插入。
