insertBefore 是 Node 接口方法，用于在父节点指定子节点前插入新 DOM 节点；不支持字符串，需先创建节点；referenceNode 为 null 时等效 appendChild；已存在节点会被移动而非复制。
insertBefore 是 JavaScript 中 Node 接口的方法，用于在指定父节点的某个子节点**之前**插入一个新节点。它不支持直接插入字符串，必须传入一个有效的 DOM 节点（如元素、文本节点等）。
基本语法和参数说明
调用格式为：
parentNode.insertBefore(newNode, referenceNode)
- parentNode：目标父元素（必须是已存在的 DOM 节点）
- newNode：要插入的新节点（不能是字符串，需先创建）
-
referenceNode：作为参考位置的子节点；新节点将被插入到它前面；如果为
null，则等效于appendChild（追加到最后）
常见用法示例
✅ 正确做法：先创建节点，再插入
// HTML: <div id="container"><p>第一段</p><p>第二段</p></div>
const container = document.getElementById('container');
const newP = document.createElement('p');
newP.textContent = '插入在最前';
// 插入到第一个 <p> 前面
const firstP = container.querySelector('p');
container.insertBefore(newP, firstP);
✅ 插入到末尾（传入 null）
const lastP = container.querySelector('p:last-child');
container.insertBefore(newP, null); // 等同于 container.appendChild(newP)
❌ 错误写法（会报错）：
立即学习“Java免费学习笔记（深入）”；
container.insertBefore('<p>文本</p>', firstP); // TypeError：不是 Node 类型
插入文本内容的处理方式
如果想插入纯文本，需用 document.createTextNode() 或直接设置 textContent/innerText：
- 用文本节点：
container.insertBefore(document.createTextNode('Hello'), firstP); - 更常用的是创建元素后填内容：
const span = document.createElement('span'); span.textContent = 'Hello'; container.insertBefore(span, firstP);
注意事项和易错点
- 如果
referenceNode不是parentNode的子节点，会抛出错误 - 如果
newNode已存在于文档中，它会被自动从原位置移除，再插入到新位置（即“移动”而非“复制”） - 不支持使用 CSS 选择器直接定位 referenceNode，需先用
querySelector等方法获取节点引用 - IE8+ 支持，现代浏览器无兼容问题
