本文详解为何直接将非法 HTML（如 <ul> 直接嵌套在 <tr> 中）赋值给 innerHTML 会导致结构被浏览器自动修正、内容“移出”表格，并提供符合 HTML 规范的修复方案与安全实践建议。
本文详解为何直接将非法 html（如 `
- ` 直接嵌套在 `
- <tr> 的合法子元素仅限 <th> 和 <td>（即表头单元格与数据单元格）；
- <ul>、<div>、<p> 等块级或列表元素不能直接作为 <tr> 的子节点；
- 同样，<thead>、<tbody>、<tfoot> 是 <table> 的语义化子容器；虽可省略 <tbody>（浏览器会自动补全），但绝不允许跳过单元格层级。
- 避免使用 document.createElement('html') 或 'body' 作为解析容器：<html> 元素需完整文档上下文（含 doctype、head），而 'body' 在非文档环境中行为不可靠。推荐统一使用 <div> 作为临时解析容器，它语义中立、兼容性好、无隐式修正风险。
- 服务端返回的 HTML 必须符合规范：前端不应承担“修复脏 HTML”的职责。建议后端模板或 API 响应确保生成的表格结构合法（如自动包裹 <td>）。
- 异步加载场景请优先使用现代方案：若目标是加载远程页面片段，应使用 fetch() + response.text()，而非过时的 XMLHttpRequest；同时务必对动态插入的内容做 XSS 防护（如使用 DOMPurify.sanitize() 过滤富文本）。
在前端开发中，通过 element.innerHTML = htmlString 动态注入 HTML 是常见操作。但当 HTML 字符串包含表格（<table>）结构时，若其内部标记不符合 DOM 树的严格嵌套规范，浏览器会主动执行“纠错式解析”（parser correction），导致实际渲染结果与原始字符串严重不符——例如 <ul> 被移出 <tr> 甚至 <table> 外部，看似“失效”，实则是浏览器在强制修复非法结构。
根本原因在于 HTML 规范对表格元素有明确的内容模型约束：
以下代码直观展示了问题所在：
let html = `
<div>
<table>
<tr>
<ul> <!-- ❌ 非法：ul 不是 tr 的合法子元素 -->
<li>Apple</li>
<li>Banana</li>
<li>Cat</li>
</ul>
</tr>
</table>
</div>
`;
const temp = document.createElement('div'); // 推荐用 div，非 html 或 body
temp.innerHTML = html;
console.log('原始 HTML:', html);
console.log('解析后 HTML:', temp.innerHTML);
// 输出中可见 ul 已被提升至 table 外部 —— 浏览器已重排 DOM✅ 正确写法：所有内容必须包裹在 <td> 或 <th> 内：
立即学习“前端免费学习笔记（深入）”；
let html = `
<div>
<table>
<tr>
<td> <!-- ✅ 合法容器 -->
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cat</li>
</ul>
</td>
</tr>
</table>
</div>
`;
const container = document.createElement('div');
container.innerHTML = html;
document.body.appendChild(container); // 安全插入到真实 DOM⚠️ 注意事项：
总结：innerHTML 的“异常行为”本质是浏览器对非法 HTML 的容错处理。解决问题的关键不是绕过规范，而是严格遵循 HTML 内容模型——表格行（<tr>）内只放单元格（<td>/<th>），单元格内再放置任意合法内容。养成验证 HTML 结构的习惯（如使用 W3C Markup Validator），可大幅减少此类隐蔽渲染问题。
