innerHTML 更新时会嵌套多层 <li> 是因为只替换内容而不替换标签本身，导致新 <li> 被作为子节点插入；正确做法是仅拼接内部 HTML 并单独更新属性。
innerHTML 更新时为何会嵌套出多层 <li>
因为 innerHTML 只替换目标元素的“内容”，不碰它的标签本身。如果你给一个已存在的 <li> 元素赋值含完整 <li> 标签的字符串，浏览器会把新 <li> 当作子节点塞进去——结果就是 <li><li>...</li></li>。
常见错误写法：
_renderWorkoutUpdated(currentWorkout) {
let html = `<li class="workout workout--${currentWorkout.type}" data-id="${currentWorkout.id}">...</li>`;
document.querySelector(`.workout[data-id="${currentWorkout.id}"]`).innerHTML = html;
}
正确做法是：只拼内部 HTML（不含外层 <li>），再单独设属性：
- 构建字符串时去掉
<li>和</li>，只保留子结构（如<div class="workout__details">...） - 用
targetLi.innerHTML = html替换内容 - 用
targetLi.className = ...和targetLi.dataset.id = ...单独更新属性 - 务必先检查
targetLi是否存在，避免Cannot set property 'innerHTML' of null
textContent vs innerHTML：什么时候该用哪个
纯文本更新用 textContent，带结构的动态内容用 innerHTML——但后者有 XSS 风险，不能直接插入用户输入。
立即学习“前端免费学习笔记（深入）”；
-
textContent自动转义<、&等字符，适合显示用户名、日志摘要等不可信内容 -
innerHTML解析 HTML，适合渲染富文本、按钮组、图标等结构化片段 - 若需混合使用（比如部分可信、部分不可信），先对不可信字段调用
escapeHtml()再拼接，不要依赖后端过滤 - 注意：修改
textContent不会触发重排，比innerHTML轻量；但改完后无法响应点击事件（没标签）
批量更新列表项时如何避免频繁重排
一次改 10 个 <li>，逐个调用 innerHTML 会触发 10 次回流；换成 DocumentFragment 或字符串拼接，只要 1 次。
- 优先用字符串拼接 + 单次
innerHTML赋值（适合静态模板） - 若需绑定事件或复用节点，用
document.createDocumentFragment()批量 append，最后一次性appendChild - 避免在循环里读取
offsetHeight、getBoundingClientRect()，它们会强制同步回流 - 表格类场景（如
<tbody>更新）尤其敏感，建议用innerHTML替代逐行insertRow
replaceChild 与 innerHTML 在组件更新中的实际取舍
replaceChild 更精确，但写法啰嗦；innerHTML 简单粗暴，但会销毁子节点事件监听器。
- 用
replaceChild：当目标节点下有手动绑定的事件、第三方插件实例（如 Chart.js 图表）、或需要保留某些状态（如 input 的 focus/selection） - 用
innerHTML：内容完全可重建、无状态依赖、追求开发效率（比如日志列表、通知卡片） - 折中方案：封装一个
safeReplace函数，先提取关键状态（如input.value、scrollTop），再innerHTML，最后恢复 - 注意：React/Vue 等框架内部也基于类似逻辑做 diff，手写时别重复造轮子——简单场景够用，复杂交互建议上框架
最易被忽略的是：DOM 更新后，原节点引用仍指向旧结构，后续操作可能报错或静默失败。每次用 querySelector 获取目标前，最好确认它还在文档中。
