innerhtml 更新时会嵌套多层 是因为只替换内容而不替换标签本身，导致新 被作为子节点插入；正确做法是仅拼接内部 html 并单独更新属性。

innerHTML 更新时为何会嵌套出多层 <li>

因为 innerHTML 只替换目标元素的“内容”，不碰它的标签本身。如果你给一个已存在的 <li> 元素赋值含完整 <li> 标签的字符串，浏览器会把新 <li> 当作子节点塞进去——结果就是 <li> <li>...</li>。

常见错误写法：

_renderWorkoutUpdated(currentWorkout) {
  let html = `

...

`; document.querySelector(`.workout[data-id="${currentWorkout.id}"]`).innerHTML = html; }

正确做法是：只拼内部 HTML（不含外层 <li>），再单独设属性：

• 构建字符串时去掉 <li> 和
，只保留子结构（如 <div class="workout__details">...） <li>用 <code>targetLi.innerHTML = html 替换内容
• 用 targetLi.className = ... 和 targetLi.dataset.id = ... 单独更新属性
• 务必先检查 targetLi 是否存在，避免 Cannot set property 'innerHTML' of null

textContent vs innerHTML：什么时候该用哪个

纯文本更新用 textContent，带结构的动态内容用 innerHTML——但后者有 XSS 风险，不能直接插入用户输入。


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• textContent 自动转义 、<code>& 等字符，适合显示用户名、日志摘要等不可信内容
• innerHTML 解析 HTML，适合渲染富文本、按钮组、图标等结构化片段
• 若需混合使用（比如部分可信、部分不可信），先对不可信字段调用 escapeHtml() 再拼接，不要依赖后端过滤
• 注意：修改 textContent 不会触发重排，比 innerHTML 轻量；但改完后无法响应点击事件（没标签）

批量更新列表项时如何避免频繁重排

一次改 10 个 <li>，逐个调用 innerHTML 会触发 10 次回流；换成 DocumentFragment 或字符串拼接，只要 1 次。

• 优先用字符串拼接 + 单次 innerHTML 赋值（适合静态模板）
• 若需绑定事件或复用节点，用 document.createDocumentFragment() 批量 append，最后一次性 appendChild
• 避免在循环里读取 offsetHeight、getBoundingClientRect()，它们会强制同步回流
• 表格类场景（如 <tbody> 更新）尤其敏感，建议用 <code>innerHTML 替代逐行 insertRow

  replaceChild 与 innerHTML 在组件更新中的实际取舍

  replaceChild 更精确，但写法啰嗦；innerHTML 简单粗暴，但会销毁子节点事件监听器。

  • 用 replaceChild：当目标节点下有手动绑定的事件、第三方插件实例（如 Chart.js 图表）、或需要保留某些状态（如 input 的 focus/selection）
  • 用 innerHTML：内容完全可重建、无状态依赖、追求开发效率（比如日志列表、通知卡片）
  • 折中方案：封装一个 safeReplace 函数，先提取关键状态（如 input.value、scrollTop），再 innerHTML，最后恢复
  • 注意：React/Vue 等框架内部也基于类似逻辑做 diff，手写时别重复造轮子——简单场景够用，复杂交互建议上框架

  最易被忽略的是：DOM 更新后，原节点引用仍指向旧结构，后续操作可能报错或静默失败。每次用 querySelector 获取目标前，最好确认它还在文档中。