如何在 JavaScript 中将元素插入到其他元素之后？

在 JavaScript 中在其他元素之后插入元素

在现有节点之后插入元素是 JavaScript 中的常见操作。然而，虽然有 insertBefore() 方法，但它只能在引用节点之前添加元素。要在后面插入元素，我们需要另一种方法。

不使用库的解决方案

要在不使用库的情况下插入一个元素，我们可以使用以下代码：

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

这里有一个细分：

• referenceNode：
• parentNode：referenceNode 的父元素。
• nextSibling：referenceNode 的下一个同级元素，如果referenceNode 是最后一个子节点，则该元素将为 null。

如果referenceNode是最后一个子节点，则nextSibling将为空。 insertBefore 通过将新节点添加到列表末尾来处理这种情况。

可重用函数

我们可以将此功能包装在可重用函数中：

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

示例

至测试这个函数，我们可以使用以下代码片段：

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

这将创建一个带有文本“test”的新 span 元素，并将其插入到 ID 为“foo”的 div 元素之后。

以上是如何在 JavaScript 中将元素插入到其他元素之后？的详细内容。更多信息请关注PHP中文网其他相关文章！