innerHTML插入HTML结构需两步：找对目标元素并赋值合法HTML字符串；其本质是字符串解析操作，高效但频繁使用会引发重排重绘、事件丢失及安全风险，适合结构简单、内容可信的一次性渲染。
在 JS 中用 innerHTML 插入 HTML 结构很简单，但是否“直接”不是重点，关键在于何时插、插到哪、插什么内容。它本质是字符串解析式操作，快但有代价——结构越复杂、插入越频繁，性能和安全风险越明显。
怎么用 innerHTML 插入结构
核心就两步：找对元素 + 赋值合法 HTML 字符串。
- 先用
document.getElementById或document.querySelector获取目标元素，确保它已挂载到 DOM（脚本别放<head>里且没加defer） - 直接赋值 HTML 字符串：
el.innerHTML = '<div class="card"><h2>标题</h2><p>正文</p></div>' - 支持嵌套、属性、甚至内联样式，浏览器会自动解析并构建对应 DOM 节点
- 如果想追加而非替换，得自己拼接：
el.innerHTML += '<p>新段落</p>'（不推荐，见下文）
为什么 innerHTML 会带来性能问题
每次设置 innerHTML，浏览器都要做三件事：清空原子树 → 解析新字符串 → 重建全部子节点。这个过程会触发重排（reflow）和重绘（repaint），尤其当容器里已有大量节点或含 input、video 等状态组件时，副作用更明显。
- 重复调用
innerHTML +=实际是“读 + 解析 + 替换”，比一次性写入慢得多 - 若插入含事件监听器的 HTML（比如
<button onclick="doSomething()">），绑定不会自动生效，需手动补监听 - 频繁操作还会中断用户输入（如清空
<input>的 value、丢失焦点）
结构简单时怎么平衡效率与安全
不是所有场景都得放弃 innerHTML。结构明确、内容可信、更新不频繁时，它仍是最快方案。
立即学习“前端免费学习笔记（深入）”；
- 只用于服务端渲染后的一次性填充，或纯展示型模块（如文章正文、静态卡片）
- 避免插入用户可控内容；必须插入时，先做 HTML 转义（如用
textContent创建临时节点取纯文本，或用库如 DOMPurify 过滤） - 批量插入多个同构项，优先拼成一个长字符串再赋值，而不是循环多次
innerHTML += - 结构稍复杂但需保留交互逻辑时，改用
insertAdjacentHTML，指定位置（如'beforeend'）可避免重置整个容器
什么情况下该换别的方法
当结构动态性强、需精细控制生命周期、或插入频率高（如实时消息流、图表数据刷新），就该考虑替代方案：
-
document.createElement+appendChild：适合少量节点、需绑定事件或复用逻辑的场景 -
DocumentFragment：批量创建节点后一次性挂载，减少重排次数 - 模板引擎（如 Lit、HTM）或框架（React/Vue）：把结构声明化，由底层优化 diff 和 patch
- 服务端注入：静态内容用构建工具（如 Vite 插件、Webpack loader）预填 HTML，避开运行时解析
