before()和after()可在当前节点外部插入兄弟元素，要求节点已挂载；支持多参数、字符串自动转文本；不复制而是移动节点，IE不支持。
JavaScript 中的 before() 和 after() 方法可以直接在当前节点的**外部**插入兄弟元素（或文本节点），无需手动操作父节点，语法简洁、语义清晰。
before()：在当前节点前面插入兄弟节点
调用 element.before(...nodes) 会在该元素的父节点中，将其自身作为参考点，把传入的节点插入到它**之前的位置**。插入内容可以是 Element、Text 或字符串（字符串会自动转为 Text 节点）。
例如：
const div = document.querySelector('#target');
const newSpan = document.createElement('span');
newSpan.textContent = '我是前面的';
div.before(newSpan); // newSpan 成为 div 的前一个兄弟节点
// DOM 结构变为：[newSpan] [div] [...]
- 如果传入多个参数（如
el.before(a, b, 'text')），它们会按顺序插入到 el 前面 - 不能跨父级插入——所有节点必须属于同一文档上下文，且目标节点需已挂载（有父节点）
- 若 el 还未添加到 DOM（即
el.parentNode === null），调用 before 会静默失败（不报错但无效果）
after()：在当前节点后面插入兄弟节点
element.after(...nodes) 行为与 before() 对称：将节点插入到当前元素在其父节点中的位置之后。
例如：
const p = document.querySelector('p');
p.after(document.createElement('hr'), '分割线'); // 插入 <hr> 和文本节点
// DOM 变为：<p>...</p> [<hr>] ['分割线']
- 支持同时插入多个不同类型节点（Element、Text、字符串）
- 插入后，新节点与原节点处于同一父级下，是真正的“兄弟关系”
- 和
before()一样，要求目标节点已有父节点，否则无效
对比 insertAdjacentElement / insertAdjacentHTML
before() 和 after() 是现代标准方法（IE 不支持），比传统 insertAdjacentElement('beforebegin', ...) 更直观，且不依赖字符串位置描述符（如 'beforebegin'）。
-
el.before(x)≈el.insertAdjacentElement('beforebegin', x) -
el.after(x)≈el.insertAdjacentElement('afterend', x) - 但
before/after支持直接传字符串，而insertAdjacentElement只接受 Element；若要插 HTML 字符串，得用insertAdjacentHTML
注意事项与常见问题
这些方法操作的是“节点引用”，不是复制节点。如果传入的节点已在 DOM 中，它会被**移动**而非克隆。
- 重复调用
el.before(el)会导致 el 从原位置移除，变成空操作（因为 el 已不在原父节点中） - 想插入副本，需先调用
el.cloneNode(true) - 服务端渲染或 SSR 场景中，若脚本执行时 DOM 尚未就绪，应确保节点存在且已挂载再调用
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
