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", "<span>新项</span>")，不破坏已有结构 -
手动 diff + 复用节点（高频/复杂更新）：遍历现有子节点，比对 key 或 data-id，只
appendChild新节点、replaceChild变更节点、跳过未变节点
template 标签不是银弹，用错照样丢状态
<template></template> 能避免字符串解析开销，但 content.cloneNode(true) 每次都生成全新节点——如果你把 input 放在 template 里，clone 出来的是没焦点、没输入值的新 input。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：模板只放静态结构；动态内容（如用户输入）由 JS 单独读写
value、checked等属性 - 错误写法：
template.innerHTML = "<input value='" + userInput + "'>"—— 这会让 input 永远拿不到实时值，且每次 clone 都重置 - 若必须用 template 渲染表单，初始化后立刻用
input.value = storedValue同步，别依赖 innerHTML 回填
真正难的不是“怎么写”，而是识别哪些节点承载了不可丢的状态：表单控件、媒体元素、WebGL canvas、第三方插件挂载点……这些地方一旦被 innerHTML 扫过，就不是刷新能解决的问题了。
