最安全的动态插入html方式是createelement搭配appendchild，因其完全绕过html字符串解析而天然防xss；innerhtml易引发xss且性能差；insertadjacenthtml更灵活但需注意兼容性和参数合法性；框架中须使用其提供的安全api如dangerouslysetinnerhtml或v-html。
用 innerHTML 直接写入 HTML 字符串
这是最常见也最容易出错的方式。直接给 div.innerHTML 赋值一段 HTML 字符串，浏览器会自动解析并渲染成 DOM 节点。
但要注意：如果字符串里含用户输入内容，没做转义就直接塞进去，innerHTML 会执行其中的 <script></script>、事件属性（比如 onclick）等，导致 XSS。
- 安全场景下可用：
div.innerHTML = "<p>Hello</p> <button>Click</button>" - 含变量时务必先转义：
div.innerHTML = "<span>" + escapeHtml(userInput) + "</span>"（escapeHtml需自己实现或用库） - 不要在循环中反复赋值
innerHTML，性能差；大段 HTML 推荐用DocumentFragment或一次性写入
用 insertAdjacentHTML 插入到指定位置
比 innerHTML 更灵活，能控制插入点（开头、结尾、前面、后面），且不重绘已有子节点，适合局部追加。
立即学习“前端免费学习笔记（深入）”；
常见错误是传错位置参数——只有四个合法值："beforebegin"、"afterbegin"、"beforeend"、"afterend"，拼错或大小写不对都会静默失败。
- 追加到最后：
div.insertAdjacentHTML("beforeend", "<img src="a.jpg" alt="怎么把html嵌入div_html嵌入div元素【方法】" >") - 插到最前：
div.insertAdjacentHTML("afterbegin", "<h3>Title</h3>") - 不支持 IE8 及更早版本；Edge 12+、Chrome 1+、Firefox 8+ 都没问题
用 createElement 搭配 appendChild 安全构建
完全绕过 HTML 字符串解析，从 JS 对象层面构造节点，天然防 XSS，适合动态生成结构复杂或含用户数据的元素。
缺点是代码略长，对嵌套深的结构容易写乱；另外，createElement 创建的元素没有样式或事件绑定，得手动补全。
- 基础写法：
const p = document.createElement("p"); p.textContent = "Hello"; div.appendChild(p); - 设属性用
setAttribute，比如：img.setAttribute("src", url)；不要用img.src = url（可能触发预加载） - 批量插入多个节点，先用
document.createDocumentFragment()收集，再一次性appendChild，避免多次重排
React/Vue 等框架里别硬塞 innerHTML
框架接管了 DOM 更新逻辑，直接操作 innerHTML 会破坏虚拟 DOM 一致性，轻则渲染异常，重则触发警告甚至崩溃（比如 React 的 Warning: Prop `dangerouslySetInnerHTML` did not match）。
真要注入 HTML，必须走框架提供的安全通道，且明确承担风险。
- React 中用
dangerouslySetInnerHTML={{ __html: htmlStr }}，且htmlStr必须确保可信 - Vue 中用
v-html="htmlStr"，同样不自动转义，和innerHTML行为一致 - Next.js / Nuxt 等服务端渲染环境，v-html/dangerouslySetInnerHTML 在 SSR 阶段可能被忽略或报错，得检查 hydration 是否匹配
真正麻烦的不是“怎么塞”，而是“谁来保证这段 HTML 是干净的”。很多线上 XSS 漏洞，都卡在后端返回了未过滤的富文本，前端又图省事用了 innerHTML —— 这类问题一旦发生，定位成本远高于预防成本。
