insertbefore的核心是必须由父节点调用，将新节点插入其子节点中指定参考节点之前；要求参考节点必须已有父节点，否则报错。
insertBefore 的核心是：必须明确指定父节点，再用它调用方法，把新节点插到该父节点内某个子节点的前面。
关键前提：目标节点必须有父节点
insertBefore 不是直接在文档中“找位置插入”，而是操作某个父元素的子节点顺序。如果目标节点（referenceNode）还没被添加到 DOM 中，或没有父节点（parentNode === null），就会报错：Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
✅ 正确做法：
- 先确认
targetElement.parentNode存在且非 null - 确保新节点（newNode）和目标节点（targetElement）属于同一个父容器（或至少你准备把它插进的那个父容器）
- 调用的是父节点的方法：
parentNode.insertBefore(newNode, targetElement)
常见精准插入场景与写法
✅ 把新元素插到某个已知元素前面（同级）：
const newDiv = document.createElement('div');
newDiv.textContent = '我是新节点';
const target = document.getElementById('item-2');
if (target && target.parentNode) {
target.parentNode.insertBefore(newDiv, target);
}
✅ 插入前先判断目标是否为第一个子节点（避免误插到 null 前）：
当 targetElement 是父节点的第一个子节点时，targetElement.previousSibling 是 null，但 insertBefore 允许第二个参数为 null——此时等效于 appendChild（追加到最后）。所以无需额外判断 null，直接传即可。
✅ 动态创建并插入（避免重复添加）：
- 如果
newNode已存在于 DOM 中，insertBefore会自动将其从原位置移走，再插入新位置（DOM 节点不能同时存在于两处） - 不需要手动
remove()，直接插就行
容易出错的几个点
- ❌ 写成
targetElement.insertBefore(newNode, targetElement)—— 错！方法必须由父节点调用 - ❌ 新节点是文本但没包装：
parent.insertBefore('hello', target)—— 错！第二个参数可以是 null 或节点，但第一个参数必须是 Node 实例（可用document.createTextNode('hello')） - ❌ 目标节点已被移除或未挂载，却仍尝试插入 —— 建议插入前加
if (target?.parentNode)防御
补充：想插到“某个元素之后”怎么办？
原生没有 insertAfter，但可模拟：
function insertAfter(newNode, referenceNode) {
const parent = referenceNode.parentNode;
if (parent) {
parent.insertBefore(newNode, referenceNode.nextSibling);
}
}
原理：把新节点插到目标节点的下一个兄弟节点之前；若目标已是最后一个，则 nextSibling 为 null，效果等同于 appendChild。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
