insertAdjacentHTML 比 innerHTML 追加更快，因其仅解析新字符串、不重建原有 DOM；推荐用 'beforeend' 追加，注意转义用户输入并避开 table 等特殊元素限制。
用 insertAdjacentHTML 替代 innerHTML 追加内容，能显著提升解析速度——核心在于它只解析新传入的 HTML 字符串，不碰原有 DOM，避免了序列化、丢弃、重建整棵子树的开销。
为什么 insertAdjacentHTML 解析更快
每次设置 innerHTML += html，浏览器必须：
- 把整个容器的当前 DOM 子树序列化成字符串（读）
- 拼接新内容，生成新字符串
- 清空所有子节点
- 重新解析整个新字符串，重建全部 DOM 节点
而 insertAdjacentHTML('beforeend', html) 只做一件事：解析你传入的 html 字符串，生成对应节点，再精准插入。原有结构、事件监听器、表单值、滚动位置全部保留。
实测插入 100 条列表项时，比 innerHTML += 快 2–4 倍，比先清空再重赋值快 3 倍以上。
立即学习“前端免费学习笔记（深入）”；
选对 position 参数才能发挥性能优势
四个位置参数决定插入逻辑是否清晰、是否安全：
-
追加内容统一用
'beforeend'：等效于appendChild，插在元素内部末尾，语义明确且兼容性好 -
前置插入用
'afterbegin'：插在第一个子节点之前，比反复操作firstChild更稳定 -
工具栏/提示层用
'beforebegin'或'afterend'：它们插入的是兄弟节点，适合脱离容器内部结构的动态挂载 - 注意：
'beforeend'不是“插在元素外面末尾”，而是“插在元素里面最后一个子节点之后”
安全插入不能跳过转义
insertAdjacentHTML 和 innerHTML 一样，不做自动转义。直接拼接用户输入等于打开 XSS 大门：
- ❌ 危险写法：
el.insertAdjacentHTML('beforeend', '<div>' + userInput + '</div>') - ✅ 安全做法：对用户数据先做 HTML 实体转义（如将
<→），再插入；或用 <code>textContent拼接纯文本部分，仅对可信模板片段用insertAdjacentHTML
避免常见误用陷阱
几个容易踩坑的地方：
- 对
<table>或<tbody>直接用'beforeend'插入<tr>，旧版 IE 会报错，应包装为<tbody><tr>...</tr></tbody> -
'beforebegin'和'afterend'要求元素已挂载到 DOM（有父节点），否则无效 - 不要混用
innerHTML =和insertAdjacentHTML操作同一元素，易导致 DOM 状态不一致
