浏览器将未闭合渲染成整页嵌套，因其html解析器采用容错重排策略：连续多个仅闭合最后一个时，解析器会将前几个自动延展至文档末尾，导致dom树深度爆炸、css选择器失效、queryselector查找不到元素。

为什么浏览器会把没闭合的 <div> 渲染成一整页嵌套？ <p>因为 HTML 解析器采用“容错重排”策略，遇到未闭合标签时不会报错，而是尝试推测意图——比如连续写 5 个 <code><div> 却只闭合最后一个，解析器会把前 4 个自动延展到文档末尾，导致 DOM 树深度爆炸、CSS 选择器失效、JS <code>querySelector 找不到目标元素。

用 innerHTML 动态插入时如何避免标签撕裂？

直接拼接字符串极易出错，尤其在循环中混入条件分支。关键不是“写对”，而是“不让它有机会写错”：

• 永远用模板字面量 + 显式闭合结构：

  const html = `<div class="card">
  <h3>${title}</h3>
  <p>${desc}</p>
  </div>`;

• 避免在字符串里拼 <div> 和 <code>