insertadjacenthtml是专为不破坏dom状态设计的原生插入方法，支持beforebegin、afterbegin、beforeend、afterend四种位置参数，可保留事件监听器、表单值和光标位置。
insertAdjacentHTML 是一个在指定位置插入 HTML 字符串的原生方法，它不重新解析整个元素内容，性能好、安全性可控（注意 XSS 风险），且支持四种精确插入位置。
四个插入位置参数及含义
该方法接收两个参数：insertAdjacentHTML(position, htmlString)，其中 position 必须是以下字符串之一：
- 'beforebegin'：插入到目标元素自身之前（即父元素中，目标元素的前面）
-
'afterbegin'：插入到目标元素内部最开头（等价于
element.prepend()） -
'beforeend'：插入到目标元素内部最后面（等价于
element.append()） - 'afterend'：插入到目标元素自身之后（即父元素中，目标元素的后面）
常用场景：在元素内部开头或结尾插入结构
多数时候你关心的是“内部插入”，也就是后两个位置：
- 想把新内容加在容器最上面（如顶部提示条）→ 用
'afterbegin' - 想追加内容到底部（如聊天消息、列表项）→ 用
'beforeend'
例如：
const container = document.getElementById('list');container.insertAdjacentHTML('beforeend', '
注意事项和实用建议
- 插入的 HTML 字符串会被解析并创建真实 DOM 节点，但不会执行其中的 script 标签（除非手动调用）
- 如果 HTML 字符串含用户输入，务必先转义（如用
textContent或工具函数处理），否则有 XSS 风险 - 相比
innerHTML += ...，它不破坏已有绑定的事件监听器或表单状态（因为不重写整个 innerHTML） - 不支持 DocumentFragment，若需批量插入，可拼接字符串后一次调用，或改用
append()+document.createElement()
对比 innerHTML += 的关键区别
很多人习惯写 el.innerHTML += '<div>...</div>'，但这会：
- 强制重新解析整个 innerHTML，性能差
- 清空并重建所有子节点 → 已绑定的事件丢失、输入框焦点消失、滚动位置重置
- 而
insertAdjacentHTML('beforeend', ...)只新增节点，原有结构完全保留
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
