在 Web 开发中，我们经常需要通过 JavaScript 来操作 HTML 文档的 DOM 元素。其中一个常用的方法就是 insertBefore() 方法，它可以在指定的位置插入一个新的子节点。
语法
parentNode.insertBefore(newNode, referenceNode);
parentNode：要插入新节点的父节点newNode：要插入的新节点referenceNode：参考节点，新节点将插入到该节点之前
示例
假设我们有一个简单的 HTML 结构如下：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ----------
-------
------
--- ------------
--------------
---------------
---------------
-----
------- -------------------- ---------------
-------
-------现在，我们想在 Apple 和 Orange 之间插入一个新的水果 Grape。我们可以使用 insertBefore() 方法来实现：
-- -------------------- ---- ------- -- ---------- --- ---- - ---------------------------------- --- ------------- - ----------------------------------- -- ----- --- ------- - ----------------------------- ------------------- - -------- -- ----- -------------------------- ---------------
在上面的代码中，我们首先获取了父节点 myList 和参考节点 Orange，然后创建了一个新的 li 节点 Grape，最后使用 insertBefore() 方法将 Grape 插入到 Orange 之前。
注意事项
- 如果
referenceNode为null，则newNode将被插入到父节点的末尾。 - 如果
newNode已经是父节点的子节点，它将首先被移除，然后再插入到新的位置。
通过 insertBefore() 方法，我们可以灵活地控制 DOM 结构，实现动态的内容插入和排序。希望本文对你有所帮助！