如何在不使用函式庫的情況下在 JavaScript 中插入一個元素？

在沒有外部函式庫的情況下在JavaScript 中插入一個元素到另一個元素

在JavaScript 領域，程式設計師經常尋求操作DOM 中的元素。雖然 jQuery 和其他函式庫簡化了此類任務，但可以在不依賴外部依賴的情況下實現元素插入。

問題：

如何將一個元素插入到另一個元素之後在 JavaScript 中，無需像這樣的庫的幫助jQuery？

答案：

要在現有節點後插入元素，JavaScript 提供了 insertBefore() 方法。然而，與 insertBefore() 的主要目的是在引用節點之前插入不同，我們可以利用它來實現我們的目標。

以下程式碼片段示範如何操作：

其中：

• referenceNode 表示要在其後插入新元素的元素
• referenceNode 表示要在其後插入新元素的元素
• referenceNode 表示要在其後插入新元素的元素

parentNode 檢索父元素引用節點的元素

nextSibling指緊接在引用節點之後的元素。如果引用節點是最後一個子節點，則 nextSibling 將為 null，insertBefore() 將透過追加到清單末端來處理這種情況。

範例函數：

可以建立一個簡潔的函數來封裝它操作：

測試功能：

要驗證我們的程式碼，我們可以使用以下程式碼段：此程式碼將插入一個測試

之後的元素id 為「foo」的元素。

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