insertAdjacentHTML是专为不破坏DOM状态设计的原生插入方法，支持beforebegin、afterbegin、beforeend、afterend四种位置参数，可保留事件监听器、表单值和光标位置。

insertAdjacentHTML 是一个在指定位置插入 HTML 字符串的原生方法，它不重新解析整个元素内容，性能好、安全性可控（注意 XSS 风险），且支持四种精确插入位置。

四个插入位置参数及含义

该方法接收两个参数：insertAdjacentHTML(position, htmlString)，其中 position 必须是以下字符串之一：

• 'beforebegin'：插入到目标元素自身之前（即父元素中，目标元素的前面）
• 'afterbegin'：插入到目标元素内部最开头（等价于 element.prepend()）
• 'beforeend'：插入到目标元素内部最后面（等价于 element.append()）
• 'afterend'：插入到目标元素自身之后（即父元素中，目标元素的后面）

常用场景：在元素内部开头或结尾插入结构

多数时候你关心的是“内部插入”，也就是后两个位置：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 想把新内容加在容器最上面（如顶部提示条）→ 用 'afterbegin'
• 想追加内容到底部（如聊天消息、列表项）→ 用 'beforeend'

例如：

立即学习“Java免费学习笔记（深入）”；

const container = document.getElementById('list');
container.insertAdjacentHTML('beforeend', '<li>新项目</li>');

注意事项和实用建议

• 插入的 HTML 字符串会被解析并创建真实 DOM 节点，但不会执行其中的 script 标签（除非手动调用）
• 如果 HTML 字符串含用户输入，务必先转义（如用 textContent 或工具函数处理），否则有 XSS 风险
• 相比 innerHTML += ...，它不破坏已有绑定的事件监听器或表单状态（因为不重写整个 innerHTML）
• 不支持 DocumentFragment，若需批量插入，可拼接字符串后一次调用，或改用 append() + document.createElement()

对比 innerHTML += 的关键区别

很多人习惯写 el.innerHTML += '<div>...</div>'，但这会：

• 强制重新解析整个 innerHTML，性能差
• 清空并重建所有子节点 → 已绑定的事件丢失、输入框焦点消失、滚动位置重置
• 而 insertAdjacentHTML('beforeend', ...) 只新增节点，原有结构完全保留