在 JavaScript 中，要在指定节点前插入兄弟元素，首选 insertBefore() 方法（需父节点调用）或现代的 before() 方法（更简洁但不兼容 IE）。
在 JavaScript 中，要在指定节点前面插入一个兄弟元素，最直接的方法是使用 insertBefore() 方法。
使用 insertBefore() 插入到目标节点之前
insertBefore() 是父节点的方法，语法为：parentNode.insertBefore(newNode, referenceNode)
它会把 newNode 插入到 referenceNode 的**前面**（即成为其前一个兄弟节点）。
- 必须确保
newNode和referenceNode有共同的父节点，否则会报错 - 如果
referenceNode为null，则等价于appendChild()，新节点会被加到最后 -
newNode可以是新建的元素，也可以是从别处移过来的已有节点（此时会自动从原位置移除）
示例：
<div id="container"> <p id="p1">第一段</p> <p id="p2">第二段</p> </div>
想在 #p2 前插入一个新段落：
const container = document.getElementById('container');
const p2 = document.getElementById('p2');
const newP = document.createElement('p');
newP.textContent = '插入在第二段之前';
container.insertBefore(newP, p2); // ✅ 成功插入为 p2 的前一个兄弟
没有父节点？先找 parentElement
如果只知道目标节点（如 #p2），但不确定它的父节点，可以直接用 referenceNode.parentElement：
立即学习“Java免费学习笔记（深入）”；
const p2 = document.getElementById('p2');
const newP = document.createElement('p');
newP.textContent = '新内容';
if (p2.parentElement) {
p2.parentElement.insertBefore(newP, p2);
}
这样写更健壮，避免因父节点不存在导致错误。
用 before() 方法（现代、更简洁）
ES6+ 支持更直观的 before() 方法，直接在目标节点前插入内容：
- 可传入多个参数：元素节点、文本节点、字符串（会被自动转为文本节点）
- 无需手动获取父节点，调用更自然
- 注意兼容性：IE 不支持，Chrome 54+/Firefox 49+/Edge 79+ 支持
示例：
const p2 = document.getElementById('p2');
const newP = document.createElement('p');
newP.textContent = '用 before 插入';
p2.before(newP); // ✅ 等效于 insertBefore，但更简洁</p>
<p>// 也可同时插入多个：
p2.before('纯文本', newP, document.createTextNode('另一个文本'));
常见误区提醒
-
insertBefore()是父节点的方法，不是目标节点的方法 —— 别写成p2.insertBefore(...) - 不要混淆
insertBefore和appendChild：后者只能加到末尾，不能指定位置 - 如果插入的是已存在于 DOM 中的节点，它会自动从原位置移除（DOM 节点唯一性）
- 用字符串调用
before()时，它会变成Text节点，不是Element
