insertBefore 的调用必须通过父节点执行，语法为 parentNode.insertBefore(newNode, referenceNode)，其中 referenceNode 是父节点的子节点，newNode 将插入其前；若 referenceNode 为 null，则等效于 appendChild。
insertBefore 的基本调用方式和参数顺序
insertBefore 是 DOM 元素方法，必须通过父节点调用，不能直接在要插入的元素上调用。它的签名是 parentNode.insertBefore(newNode, referenceNode)，其中 referenceNode 是插入位置的参考节点（新节点将插在它前面），newNode 是要插入的节点。
常见错误是把两个参数顺序搞反，或者误以为 newNode.insertBefore(...) 有效 —— 这会报错 TypeError: newNode.insertBefore is not a function。
-
referenceNode必须是parentNode的子节点；如果传null，则等效于appendChild（插到末尾） - 如果
referenceNode不是parentNode的子节点，会抛出NotFoundError - 如果
newNode已存在于文档中，它会被自动从原位置移除，再插入新位置（DOM 节点不能重复存在）
在 ul 中插入 li 到第 2 个位置的实操写法
假设有一个 <ul id="list"><li>A</li><li>B</li><li>C</li></ul>，想把新 li 插入到 “B” 前面（即索引 1 的位置）：
const ul = document.getElementById('list');
const newLi = document.createElement('li');
newLi.textContent = 'X';
const refLi = ul.children[1]; // 获取第二个 li（B）
ul.insertBefore(newLi, refLi);
关键点：用 ul.children[1] 而不是 ul.childNodes[1]，因为 childNodes 包含文本节点（如换行、空格），容易踩坑导致参考节点错位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 若要插入到开头，可用
ul.firstChild作referenceNode - 若要插入到末尾，传
null：ul.insertBefore(newLi, null) - 注意：
children是实时集合，但insertBefore执行后不会影响已缓存的refLi变量值
insertBefore 和 appendChild、replaceChild 的行为差异
三者都是父节点方法，但语义和容错性不同：appendChild 最宽松（不校验 referenceNode），replaceChild 要求替换节点必须已存在，而 insertBefore 对 referenceNode 的存在性和归属校验最严格。
- 用
appendChild插入到末尾更简洁，无需找lastChild或传null -
replaceChild(newNode, oldNode)会移除oldNode并插入newNode，不改变兄弟节点顺序 - 试图用
insertBefore实现“替换”时，别漏掉手动removeChild，否则只是多插一个节点
动态插入时容易忽略的兼容性与副作用
现代浏览器都支持 insertBefore，但要注意事件监听器和数据绑定的断裂问题 —— 如果被移动的节点绑定了 addEventListener，事件监听不受影响；但如果是框架（如 Vue/React）管理的节点，直接用原生 insertBefore 会绕过响应式系统，导致视图不更新或状态丢失。
- 操作前检查
referenceNode是否为null，避免在空列表中调用时报错 - 批量插入多个节点时，不要复用同一个
newNode变量（DOM 节点只能在一个位置存在） - 若插入的是含表单控件的片段，注意焦点、输入值、验证状态可能不会自动迁移
最常被跳过的一步：确认 parentNode 是你要操作的那个，而不是误用了祖先节点或 document.body —— 尤其在嵌套组件或 Shadow DOM 场景下，parentNode 容易被误解。
