如何在 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中文網其他相關文章！