如何在沒有函式庫的情況下在 JavaScript 中插入一個元素？

在沒有函式庫的JavaScript 中將元素插入其他元素

在JavaScript 中，存在insertBefore() 方法，用於在指定參考之前插入元素節點。但是，如果您想在不依賴 jQuery 或其他庫的情況下在另一個元素之後插入一個元素怎麼辦？

答案

以下程式碼片段就是您所需要的：

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

其運作原理如下：

• referenceNode 代表您要在其後插入新節點(newNode) 的節點。
• referenceNode.parentNode 取得引用節點的父節點。
• referenceNode.nextSibling 標識引用節點的下一個兄弟節點。如果 ReferenceNode 是最後一個子節點，則 nextSibling 將為 null。這種情況可以透過 insertBefore() 進行適當處理，它會附加到子清單的末端。

範例程式碼

要使用此解決方案，您可以定義以下函數：

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

然後您可以像這樣使用這個函數so:

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

此程式碼將在id 為「foo」的div之後插入帶有文字“test”的 span 元素。

以上是如何在沒有函式庫的情況下在 JavaScript 中插入一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！