为何使用createElement会额外添加tbody标签？

我给已有表头行的表格通过JS添加新行，代码和初始结构如下：

初始HTML：

<table id="x">
<tr><th>xyz</th></tr>
</table>

执行的JS代码：

y=document.createElement('tr');
z=document.createElement('td');
z.append(document.createTextNode('abc'));
y.append(z);
x.append(y);
console.log(x.innerHTML);

结果输出的innerHTML自动多了<tbody>标签，变成这样：

<tbody><tr><th>xyz</th></tr></tbody><tr><td>abc</td></tr>

但我想要的是没有<tbody>的结果：

<tr><th>xyz</th></tr><tr><td>abc</td></tr>

浏览器会自动给表格补全<tbody>标签——HTML规范要求表格的行必须放在<tbody>、<thead>这类容器里。直接把新<tr>加到<table>上时，原有表头行被浏览器自动塞进了生成的<tbody>，新行却在这个<tbody>外面，所以innerHTML输出就成了分开的结构。

要让新行也进到<tbody>里，修改代码即可：

1. 先找到或创建表格的<tbody>，把原有行移进去（如果还没在里面的话）：

const table = document.getElementById('x');
let tbody = table.querySelector('tbody');
// 如果没有tbody就新建一个，把原有行移进去
if (!tbody) {
  tbody = document.createElement('tbody');
  while (table.firstChild) {
    tbody.appendChild(table.firstChild);
  }
  table.appendChild(tbody);
}
// 然后把新行加到tbody里
const y = document.createElement('tr');
const z = document.createElement('td');
z.append(document.createTextNode('abc'));
y.append(z);
tbody.append(y);
// 此时table的innerHTML是带tbody的，要是只想拿行的部分，直接取tbody的innerHTML就行
console.log(tbody.innerHTML);

这样console.log(tbody.innerHTML)输出的就是你想要的：

<tr><th>xyz</th></tr><tr><td>abc</td></tr>

HTML规范里表格行必须放在<tbody>这类容器里，浏览器自动补全是正常行为。如果只是需要获取不带<tbody>的行代码，取<tbody>的innerHTML就够了，没必要强行去掉表格里的<tbody>，不然可能导致表格结构不符合规范。

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