innerHTML = "xxx" 会丢掉动态内容，因为浏览器每次都会销毁旧节点、重建整个子树，导致事件监听器、焦点、播放进度等全部清零；应改用textContent、insertAdjacentHTML或手动diff复用节点。

页面重绘时“保留动态内容”不是靠 HTML 自身能力，而是靠你避免触发全量 DOM 替换——innerHTML 赋值是最常见的误操作源头。

为什么 innerHTML = "xxx" 会丢掉动态内容

每次执行 innerHTML = ...，浏览器都会销毁旧节点、重建整个子树。所有已绑定的事件监听器、input 的焦点、video 的播放进度、canvas 的绘制状态，全部清零。

• 常见现象：表格里点开的下拉框瞬间关闭、富文本编辑器光标跳回开头、正在录音的 MediaRecorder 对象报错 “InvalidStateError”
• 根本原因：DOM 节点被替换，原生对象引用失效，JS 无法再控制它
• 哪怕只改一个字，innerHTML = oldText + "!" 也会重建全部节点，不是“追加”，是“重建+拼接”

保留动态内容的三个实操路径

核心原则：不销毁已有节点，只更新必要部分。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 用 textContent 替代 innerHTML（纯文本场景）：el.textContent = "新文本" 只更新文本节点，不碰子元素，事件和状态全保留
• 用 insertAdjacentHTML 局部插入（需 HTML 片段）：el.insertAdjacentHTML("beforeend", "新项")，不破坏已有结构
• 手动 diff + 复用节点（高频/复杂更新）：遍历现有子节点，比对 key 或 data-id，只 appendChild 新节点、replaceChild 变更节点、跳过未变节点

template 标签不是银弹，用错照样丢状态

能避免字符串解析开销，但 content.cloneNode(true) 每次都生成全新节点——如果你把 input 放在 template 里，clone 出来的是没焦点、没输入值的新 input。

• 正确做法：模板只放静态结构；动态内容（如用户输入）由 JS 单独读写 value、checked 等属性
• 错误写法：template.innerHTML = "" —— 这会让 input 永远拿不到实时值，且每次 clone 都重置
• 若必须用 template 渲染表单，初始化后立刻用 input.value = storedValue 同步，别依赖 innerHTML 回填

真正难的不是“怎么写”，而是识别哪些节点承载了不可丢的状态：表单控件、媒体元素、WebGL canvas、第三方插件挂载点……这些地方一旦被 innerHTML 扫过，就不是刷新能解决的问题了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！