使用 `innerhtml` 动态插入含 `
| ` → 内容），并优先使用 `` 而非 `` 元素进行解析。 在 Web 开发中，通过 HTMLElement.innerHTML 动态渲染后端返回的 HTML 片段是一种常见需求。但当 HTML 包含 <table> 元素时，开发者常遇到“内容意外移出表格”的问题——这并非 JavaScript Bug，而是浏览器对非法 HTML 结构的自动纠错行为。 根据 HTML 标准，<tr> 元素的有效子元素仅限于 <th> 和 <td>。若在 <tr> 中直接写入 <ul>、<div> 或 <span> 等非表格单元格元素，浏览器解析器会将其视为“孤立内容”，并强制将其提升至 <tr> 外部（通常置于 <table> 之前或之后），从而破坏预期布局。 ✅ 正确结构示例： <table>
<tr>
<td>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cat</li>
</ul>
</td>
</tr>
</table>⚠️ 错误结构（将被自动修复）： 立即学习“前端免费学习笔记（深入）”； <!-- ❌ 非法：tr 不允许直接包含 ul --> <tr> <ul>...</ul> </tr> 此外，创建临时容器解析 HTML 时，应使用语义正确的元素：
完整安全示例： const html = `
<div>
<table border="1">
<tr>
<td>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cat</li>
</ul>
</td>
</tr>
</table>
</div>
`;
const container = document.createElement('body'); // 关键：使用 body
container.innerHTML = html;
console.log('原始 HTML:', html);
console.log('解析后 HTML:', container.innerHTML);
// 输出中 ul 将保留在 td 内，结构完整? 补充建议：
总之，innerHTML 是强大工具，但它的行为严格遵循 HTML 规范。理解表格的语义层级（<table> → <tbody>/<thead> → <tr> → <td>/<th>），是避免 DOM 意外重排的关键。 |
