直接将非法嵌套的 html（如 `
- ` 直接置于 `
- <tr> 元素仅允许的子元素是 <td>、<th> 和可选的 <script>/<template>（见 HTML Living Standard）；
- <ul> 是块级列表容器，不能作为 <tr> 的直接子元素；
- 浏览器解析器发现非法结构时，会自动“修复”：丢弃 <tr>、将 <ul> 提升至 <table> 同级，或包裹进隐式 <tbody> 后再移出——这正是你看到内容“消失在表格外”的原因。
- 永远不要用 document.createElement('html') 解析片段：<html> 是根元素，其 innerHTML 设置行为未定义，多数浏览器会忽略或报错；应使用 <div>、<body> 或 document.implementation.createHTMLDocument().body 等上下文容器。
- 服务端返回的 HTML 必须符合规范：前端无法绕过解析器纠错，建议后端模板或 API 响应前校验 HTML 结构（如使用 DOMPurify 预处理）。
- 异步加载推荐现代方案：避免手动拼接 XMLHttpRequest，优先使用 fetch() + response.text()，再结合 DOMParser 进行更可控的解析（尤其适用于需提取特定节点的场景）：
在前端开发中，通过 HTMLElement.innerHTML 动态注入后端返回的 HTML 字符串是一种常见需求，但当 HTML 包含 <table> 结构时，若标记不符合 HTML 规范，浏览器会静默纠错（parser correction），导致渲染结果与预期严重偏离——例如 <ul> 被移出 <tr> 甚至 <table> 外部。
根本原因在于 HTML 的严格嵌套规则：
✅ 正确写法：确保表格语义完整且嵌套合法
const html = `
<div>
<table border="1">
<thead>
<tr><th>Fruits</th></tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cat</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
`;
// ✅ 关键：创建 body 元素（而非 html）用于安全解析
const container = document.createElement('body');
container.innerHTML = html;
console.log('原始 HTML:', html);
console.log('解析后 HTML:', container.innerHTML);
// 输出中 ul 将保留在 td 内，结构完整⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
// 安全异步加载示例
async function loadTableContent(url) {
try {
const response = await fetch(url);
const htmlString = await response.text();
// 使用 DOMParser 避免隐式 body 创建，支持任意根节点
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
return doc.body.firstElementChild; // 返回解析后的根元素
} catch (e) {
console.error('HTML 解析失败:', e);
}
}总结：innerHTML 不是万能的 HTML 解释器，而是依赖浏览器解析器的“快捷通道”。要可靠渲染表格等内容，必须从源头保证 HTML 合法性，并选择语义正确的宿主元素（如 body）进行解析。结构即逻辑，规范即稳定。
