before()和after()是现代DOM API中用于在目标元素同级前后插入节点的简洁方法，支持多参数、自动转文本、移动而非复制节点，但仅适用于已挂载元素且不兼容IE。
before 和 after 是现代 DOM API 中最简洁、直接的插入方法，用于在目标元素的同一父级下添加兄弟节点，无需手动操作父元素或使用 insertBefore。
before()：在目标元素前面插入一个或多个节点
调用 element.before(...nodes)，传入一个或多个 Node 或字符串（字符串会转为 Text 节点），它们将作为紧邻的前一个兄弟节点被插入。
- 支持多个参数：可一次插入多个节点或文本，顺序即为 DOM 中的顺序
- 不返回新节点，也不修改原节点，只改变 DOM 结构
- 如果传入的是已存在于 DOM 中的节点，它会被移动（不是复制）到新位置
示例：
const box = document.getElementById('box');
const newDiv = document.createElement('div');
newDiv.textContent = '我是前面的';
box.before(newDiv, '纯文本', document.createElement('hr'));
结果：newDiv、文本节点、hr 元素会按顺序出现在 #box 的前面，且与 #box 同级。
after()：在目标元素后面插入一个或多个节点
用法与 before 完全一致，只是插入位置变为目标元素的紧邻后一个兄弟节点位置。
- 同样接受多个 Node 或字符串参数
- 对已挂载节点是“移动”而非“克隆”，适合重排布局
- 比 parent.insertBefore(child, target.nextSibling) 更直观、少出错
示例：
const btn = document.querySelector('button');
btn.after('点击后生效');
注意：字符串会被自动转为 Text 节点；如需 HTML 解析，得用 innerHTML + insertAdjacentElement 等替代方案 —— before/after 不解析 HTML 字符串。
常见注意事项与避坑点
- 仅适用于已挂载到 DOM 中的元素；对 document.createElement 创建但未 append 的元素调用会静默失败（无报错但无效）
- 不能跨父级操作：目标元素和要插入的节点必须最终位于同一父容器下（否则会自动移动）
- 不兼容 IE；如需兼容旧浏览器，可用 polyfill 或回退到 parent.insertBefore / appendChild 组合
- 插入文本时注意空格和换行：字符串参数生成的是 Text 节点，保留原始空白，可能影响样式（如 inline 元素间的空格）
对比传统写法：更少代码，更少出错
过去常用：
target.parentNode.insertBefore(newNode, target); // 插入到前面
target.parentNode.insertBefore(newNode, target.nextSibling); // 插入到后面
现在只需：
target.before(newNode);
target.after(newNode);
逻辑清晰、语义明确、不易混淆 nextSibling 是否为 null，尤其适合动态插入场景。
