innerHTML为何会重排HTML结构？如何修复该问题？

原因解析 #

浏览器的HTML解析器严格遵循规范处理DOM结构：<tbody>的合法子节点只能是<tr>及相关表格元素，<span>属于无效子节点。即使内容放在<template>中（不会渲染到页面），浏览器仍会用标准解析规则处理其内部DOM，自动将无效的<span>移出表格，放到表格外部的兄弟位置，导致结构重排。

修复方案 #

1. 使用表格合法元素包裹标记 #

将<span>放在表格允许的元素内，比如用隐藏的<tr>+<td>包裹，符合HTML表格结构规范：

<tbody>
  <!-- CONTAINER FOR ITEMS -->
  <tr style="display: none;">
    <td colspan="2">
      <span data-template="team-member" data-records="[[RECORDS]]"></span>
    </td>
  </tr>
</tbody>

这样浏览器解析时不会移动节点，获取innerHTML时结构保持原样。

2. 用textContent获取原始HTML字符串 #

如果仅需获取未被解析修正的原始HTML文本，直接使用textContent替代innerHTML：

const header = document.querySelector("template#team-members");
const myHTML = header.textContent;

此方法会完全保留template内的原始字符，不经过浏览器的DOM结构修正。

3. 访问template.content获取完整DOM结构 #

若需要操作DOM节点而非字符串，使用template的content属性（返回DocumentFragment），它会完整保留原始模板结构，不会被浏览器自动修正：

const template = document.querySelector("template#team-members");
const originalContent = template.content;
// 克隆后使用，避免修改原模板
const clonedContent = originalContent.cloneNode(true);

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