可以通过某些方式在 JavaScript 中的另一个元素之后插入一个元素。
要在另一个元素之后插入一个元素，我们应该使用 insertBefore() 方法。
这是语法：
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
这里的referenceNode 是要放在newNode 之后的节点。
如果 referenceNode 是最后一个孩子，则 referenceNode.nextSibling 将为 null 并且 insertBefore 可以通过添加到列表的末尾来处理这种情况：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#divId {
color: green;
font-size: 25px;
}
span {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div id="divId">Welcome to onitroad</div>
<script>
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
let elem = document.createElement("span");
elem.innerHTML = "It's a Javascript book";
let div = document.getElementById("divId");
insertAfter(div, elem);
</script>
</body>
</html>
我们还可以使用最新的方法之一：insertAdjacentElement() 方法，该方法将给定的元素节点插入到相对于执行它的元素的指定位置：
<!-- refElement.insertAdjacentElement('beforebegin', moveMeElement); -->
<p id="refElement">
<!-- refElement.insertAdjacentElement('afterbegin', moveMeElement); -->
... content ...
<!-- refElement.insertAdjacentElement('beforeend', moveMeElement); -->
</p>
<!-- refElement.insertAdjacentElement('afterend', moveMeElement); -->
insertBefore() 方法
Node.insertBefore() 方法用于在引用节点之前插入一个节点作为父节点的子节点。
如果文档中存在指定的节点，insertBefore() 会将其从当前位置移动到新位置，这意味着节点不能同时位于文档的两个位置。
日期：2020-06-02 22:16:22 来源：oir作者：oir