浏览器将内未转义的等标签当作html解析导致结构错乱，正确做法是用textcontent自动转义再赋值给innerhtml，或对代码片段用并设white-space: pre-wrap。
表格单元格里显示 <div> 而不是渲染成标签
<p>直接往 <code><td> 里写 <code><div>，浏览器会当成 HTML 标签解析，导致结构错乱或内容消失。这不是 bug，是浏览器本分——它只认你给的是 HTML，不是字符串。
<p>正确做法是把特殊字符转成 HTML 实体再塞进去：</p>
<ul>
<li><code> → <code>
> → >
& → &
" → "
' → '
例如：<td><script>alert(1)</script></td>，页面上就会原样显示 <script>alert(1)</script>，不会执行也不会破坏表格结构。
用 JavaScript 动态插入带特殊字符的表格数据
别用 innerHTML += 拼接，容易漏转义或引号嵌套出错；也别用 innerText，它会把 当普通文本但不还原实体（比如 <code>< 显示成字面 <）。
推荐组合：textContent + innerHTML 两步走：
- 先用
document.createElement('div').textContent = rawString得到已转义的 HTML 字符串 - 再把这个字符串赋给
cell.innerHTML
示例：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const raw = '<div class="box">Hello & "world"</div>';
const temp = document.createElement('div');
temp.textContent = raw;
const escaped = temp.innerHTML; // 结果是 '<div class="box">Hello & "world"</div>'
cell.innerHTML = escaped;
后端返回 JSON 后填进表格，为什么 变成了 <code><？
这是双重转义：后端已经用 html.escape()（Python）或类似函数转过一次，前端又手动或框架自动再转一次。比如 Python 返回 {"content": "<p>test</p>"}，JS 再调用 escapeHtml()，结果变成 <p>test</p>，浏览器最终显示 <p>test</p>。
排查要点：
- 检查后端是否对字段做了预转义（如 Django 模板默认转义、Flask 的
Markup类误用） - 确认前端是否在
innerHTML前又调了一次转义函数 - Vue/React 用户注意：
{{ }}和{}默认转义，想显示原始 HTML 必须显式用v-html或dangerouslySetInnerHTML
表格里要显示代码片段，保留缩进和换行
<td> 默认会合并空白符，<code>\n 和多个空格都不生效。单纯转义字符还不够。
必须配合 CSS 或语义化标签：
- 给
<td> 加 <code>white-space: pre-wrap，让换行和空格生效 - 更稳妥的做法是套一层
<pre class="brush:php;toolbar:false;"><code></code>，它们天然保留格式</pre> - 如果内容来自用户输入，记得先转义再包裹，顺序不能反：错误写法
<pre class="brush:php;toolbar:false;"><code>${raw}</code></pre>（没转义就直接插），正确写法是先转义再放进<pre class="brush:php;toolbar:false;"><code></code></pre>
容易忽略的一点：表格本身有边框和 padding，<pre class="brush:php;toolbar:false;"></pre> 默认有 margin，可能撑破单元格——建议重置 margin: 0。
