appendChild只能将节点追加到父元素末尾，insertBefore则通过referenceNode精准定位插入位置；二者关键在于父元素是否明确、插入位置能否定位，而非调用方式。

用 appendChild 和 insertBefore 插入节点，关键不在“会不会调用”，而在于“目标父元素是否明确”“插入位置是否可定位”。两者用途不同：appendChild 只能追加到末尾，insertBefore 才能真正实现“指定位置”插入。

appendChild：只负责“塞到最后”，不讲位置精度

它没有第二个参数，语法简单但能力固定：

• 只能把节点添加到父元素的 最后一个子节点之后（即末尾）
• 如果父元素为空，效果等同于“首次添加”
• 若误以为它能插在中间，实际会破坏预期布局——比如想插在第2个 li 前，却调用了 appendChild，结果节点跑到了整个列表最底下

insertBefore：真正的“精准定位”工具

它需要两个参数：insertBefore(newNode, referenceNode)。第二个参数 referenceNode 是关键锚点：

• referenceNode 必须是父元素的已有子节点，不能是任意元素或 null
• 新节点会插入到 referenceNode 的正前方（即成为它的前一个兄弟节点）
• 如果 referenceNode 是第一个子节点，新节点就变成新的第一个；如果是最后一个，就插在倒数第二位
• 常见错误：传入 undefined 或已从 DOM 移除的节点，会导致报错或静默失败

如何安全获取 referenceNode？别硬写索引

靠 childNodes[1] 或 children[2] 定位容易出错（空文本节点干扰、动态增删导致序号偏移）。推荐更稳的方式：

• 用语义化选择器：parent.querySelector('.header')、parent.getElementById('nav')
• 用相对关系：target.nextElementSibling（插在某元素之后）、target.previousElementSibling（插在之前）
• 用位置逻辑判断：parent.firstElementChild、parent.lastElementChild、parent.children[0]（仅当确定结构稳定时）

一个实用组合：先 appendChild 再 insertBefore 调整顺序

有时节点已存在，但需调整顺序。这时可先用 appendChild 把它移到父容器末尾（DOM 中移动节点会自动从原位置移除），再用 insertBefore 插回指定位置：

• 例如把某个 div 从中间移到开头：parent.insertBefore(node, parent.firstElementChild)
• 注意：直接对同一节点反复调用 appendChild 不会报错，但只是无效重复；真正起作用的是 insertBefore 的定位动作
• 所有操作都基于当前 DOM 状态，建议在插入前确认父元素和参考节点都“活着”（parent && referenceNode && parent.contains(referenceNode)）