innerHTML赋值会放大数据质量问题，因未转义的&等字符被浏览器错误解析导致DOM塌陷；应禁用innerHTML拼接不可信数据，改用textContent或DOMPurify过滤富文本。
HTML代码质量问题本身不源于数据驱动，而是常被误当作“数据问题”来处理——比如把页面渲染异常归因为后端返回的JSON字段缺失，实际根源却是前端对数据的HTML化处理逻辑有缺陷。
为什么innerHTML赋值会放大数据质量问题
当后端返回的字段含未转义的&、或<code>>，直接塞进innerHTML会导致标签被错误解析。浏览器不会报错，但DOM结构会塌陷，后续JS查询document.getElementById可能返回null。
- 典型现象：页面某区块突然消失，或文字被截断，控制台无报错
- 真实原因：后端返回
"price: 10&20"，前端写成el.innerHTML = data.text，&20被当成实体解析失败，整段内容被截断 - 安全边界：永远不用
innerHTML拼接不可信数据；改用textContent（纯文本）或createTextNode+appendChild - 例外场景：必须渲染富文本时，用
DOMPurify.sanitize()过滤，而非手写正则
dataset属性与数据类型错配的隐性陷阱
HTML自定义属性data-*在JS中通过element.dataset读取，但所有值都是字符串——哪怕你写了data-id="123"，dataset.id === "123"，不是123。
- 常见错误：用
===比较数字型ID，如if (el.dataset.id === 123)永远为false - 兼容性影响：IE11不支持
dataset，需回退到getAttribute("data-id") - 性能注意：频繁读写
dataset会触发重排，批量操作建议先缓存再统一更新 - 调试技巧：在开发者工具Console里打印
Object.keys(el.dataset)，确认键名是否被自动转为驼峰（data-user-id→userId）
模板引擎渲染后DOM结构断裂的典型链路
使用Mustache、Handlebars或React JSX时，若模板中条件分支未闭合（如{{#if}}...{{/if}}漏写{{/if}}），生成的HTML可能缺结束标签，浏览器自动补全后DOM层级错乱。
立即学习“前端免费学习笔记（深入）”；
- 现象：CSS样式失效、
querySelector选不到预期元素、事件委托失效 - 排查路径：右键页面→“查看网页源代码”看原始HTML（未渲染状态）；再切到Elements面板看实际DOM（浏览器修正后）——两者差异即问题源头
- 关键区别：
innerHTML读取的是修正后的DOM，outerHTML读取的是原始字符串，对比二者可定位模板漏洞 - 预防动作：模板文件启用ESLint插件
eslint-plugin-mustache，禁止未闭合语法
真正难处理的不是标签没闭合，而是数据流经过多层转换（API → state → template → DOM）后，错误被稀释、延迟暴露，最后只在用户点击某个按钮时才崩——这时候得逆着链路一层层查console.log输出，而不是盯着Elements面板猜。
