appendChild 总是将新节点添加到父元素子节点末尾，仅需一个参数；insertBefore 则通过指定参考节点实现精准插入，支持插在开头、中间或特定元素前，需两个参数且参考节点必须是父元素的现有子节点。
appendChild 和 insertBefore 都是用来向父元素添加子节点的 DOM 方法，但它们的插入位置逻辑完全不同：appendChild 总是把新节点加到子节点列表的末尾；insertBefore 则允许你精确指定插入位置——放在某个已有子节点之前。
appendChild：只能追加到末尾
它只有一个参数：要插入的新节点。调用后，新节点会成为父元素的最后一个子节点。如果该节点原本已在 DOM 中，会先从原位置移除，再追加到新父元素末尾（即自动“移动”）。
- 语法简单：
parent.appendChild(newNode) - 不支持指定位置，无法插到中间或开头
- 若传入的是文档片段（DocumentFragment），会把其中所有子节点依次追加
insertBefore：可自定义插入点
它需要两个参数：新节点 和 参考节点（referenceNode）。新节点会被插入到 referenceNode 的前面。参考节点必须是 parent 的当前子节点之一（不能是 null 或不存在的节点，否则报错）。
- 语法：
parent.insertBefore(newNode, referenceNode) - 想插到开头？传入
parent.firstChild作为 referenceNode - 想插到某个元素前面？直接传那个元素节点即可
- 如果 referenceNode 是 null，效果等同于 appendChild（现代浏览器支持，但不是所有旧环境都保证）
常见误用与注意事项
两者都要求新节点是有效 Node 对象（如 Element、Text、DocumentFragment），传字符串会报错。另外：
立即学习“Java免费学习笔记（深入）”；
- 重复调用 appendChild 同一个已挂载节点，会导致节点被移动（只保留最后一次的位置）
- 用 insertBefore 插入时，若 referenceNode 不是 parent 的子节点，会抛出 DOMException
- 动态生成多个节点时，用 DocumentFragment 包裹再一次性 append/insert，性能优于逐个操作
一句话总结使用场景
要加到最后？用 appendChild，简洁直接；要插在特定位置（比如表单控件前、列表某项上面、头部导航之后）？必须用 insertBefore，并明确提供参照节点。
