insertAdjacentHTML位置参数必须严格小写且准确，仅接受'beforebegin'、'afterbegin'、'beforeend'、'afterend'四值，写错如大小写或空格将静默失败；它专为不破坏DOM状态设计，可保留事件监听器、表单值与光标位置。
insertAdjacentHTML 位置参数必须写对，否则节点会插错地方
很多开发者以为 insertAdjacentHTML 只是“往里塞 HTML”，但它的第一个参数（位置字符串）一旦写错，比如把 'beforeend' 误写成 'beforeEnd' 或 'beforeend '（带空格），整个调用就静默失败——不报错、不插入、也不提示。浏览器只认四个严格小写的值：'beforebegin'、'afterbegin'、'beforeend'、'afterend'。
常见误用场景：
- 在 Vue/React 渲染后的容器上调用，却用了
'beforebegin'，结果节点被插到父元素外侧，脱离预期 DOM 树层级 - 想追加到列表末尾，却用了
'afterbegin'，新项跑到了第一条前面，破坏原有顺序 - 拼接 HTML 字符串时未转义用户输入，直接传入含
<script>的内容，触发 XSS
innerHTML += 不适合单页应用中反复追加
虽然 innerHTML += 写起来快，但在 SPA 场景下它实际会销毁并重建整个子树：每次执行都导致已有节点的事件监听器丢失、焦点重置、表单状态清空，且无法保留 input 光标位置或滚动偏移。
更隐蔽的问题是性能：当容器内已有上百个节点，innerHTML += 会强制浏览器重新解析整段 HTML 字符串、重建全部 DOM 节点，而不仅仅是新增部分。
立即学习“前端免费学习笔记（深入）”；
替代方案建议：
- 用
insertAdjacentHTML('beforeend', htmlStr)替代 —— 只解析新增片段，不影响现有节点 - 若需插入大量节点（如渲染 50+ 条列表项），先用
DocumentFragment批量创建再一次性 append，避免多次重排 - 避免在循环中反复读写
innerHTML，哪怕只是拼接字符串
动态生成的 HTML 必须符合语义与可访问性基础规范
SPA 中 JS 插入的节点常被忽略语义完整性。例如插入一个按钮却不加 type="button"，在某些表单上下文中会默认触发表单提交；插入图片却不补 alt 属性，直接损害屏幕阅读器体验。
关键检查点：
- 所有
<img>必须有alt属性（空字符串alt=""也比缺失强） - 按钮类元素优先用
<button>而非<div onclick>，确保键盘可聚焦、空格/回车可触发 - 动态插入的模态框需手动设置
aria-modal="true"和role="dialog"，并管理焦点锁（focus trap） - 避免在 HTML 字符串中硬编码内联样式（如
style="color:red"），应通过 class 控制外观
模板字符串拼接 HTML 时容易漏掉引号或属性顺序混乱
用 JS 拼接 HTML（如 `<div class="${cls}" data-id="${id}">${text}</div>`）看似方便，但极易因变量为空、含引号或特殊字符导致结构断裂。比如 text 包含 " 会提前闭合属性值，造成后续解析失败。
安全做法：
- 优先用
document.createElement+setAttribute构建关键交互节点（如按钮、表单控件） - 若必须拼接字符串，对所有动态值做 HTML 实体转义：用
textContent创建临时元素再取innerHTML，或调用DOMPurify.sanitize()（需引入库） - 属性顺序按规范排列：
class→id→data-*→src/type/href→alt/title→role/aria-*，便于团队协作和审查
最常被跳过的细节是：动态插入后未触发自定义事件通知（如 dispatchEvent(new CustomEvent('node-added'))），导致依赖这些节点的第三方模块或监控脚本无法感知变化。
