使用HTMLElement.innerHTML加载含table元素的HTML字符串异常

问题根源 #

这不是代码bug，是浏览器HTML解析器的自动修正行为。HTML规范明确规定：<tr>（表格行）内部只能包含<td>（单元格）或<th>（表头单元格）这类表格专属元素，直接把<ul>放在<tr>里属于非法嵌套。浏览器遇到这种不符合规范的结构时，会自动把非法元素移出表格，导致你看到的内容跑到table外面。

解决方法 #

1. 修正HTML结构（最优方案） #

从源头规范后端返回的HTML，把<ul>放到<td>里面，这是符合标准的写法：

let html = `
  <div>
    <table>
      <tr> 
        <td>
          <ul>
            <li>Apple </li>
            <li>Banana </li>
            <li>Cat </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
`
let s = document.createElement('html')
s.innerHTML = html;
console.log('Actual HTML', html);
console.log('Rendered HTML', s.innerHTML);

这样修改后，浏览器会正常解析整个结构，不会移动任何内容。

2. 应急处理（无法修改后端时） #

如果暂时没法改后端返回的HTML，可以在插入页面/iframe前，用字符串处理或DOM操作给<tr>里的内容套上<td>：

// 简单的字符串替换示例（仅针对当前场景）
html = html.replace(/<tr>([\s\S]*?)<\/tr>/g, '<tr><td>$1</td></tr>');

// 再进行后续的DOM插入操作
let s = document.createElement('html')
s.innerHTML = html;

注意：字符串替换只适合简单场景，复杂HTML结构建议用DOMParser解析后再修改DOM节点。

内容的提问来源于stack exchange，提问作者shiva