如何使用纯 JavaScript 在 Table 中创建 TBody 标签？答案

【问题标题】：How do I create the TBody tag in a Table with pure JavaScript?如何使用纯 JavaScript 在 Table 中创建 TBody 标签？
【发布时间】：2011-06-26 03:25:06
【问题描述】：

如何使用纯 JavaScript 在 Table 标签中创建 TBody 标签？（没有手动篡改 HTML 代码）。有HTMLTableElement.createTHead() 和HTMLTableElement.createTFoot() 函数，但没有关于TBody 元素的函数。此外，创建 THead 元素后，使用HTMLTableElement.insertRow() 添加到表中的所有以下行都将添加到 THead 元素中。

那么您将如何在不手动篡改 HTML 的情况下在 THead 下方创建一个 TBody 元素？

【问题讨论】：

为什么只关注HTMLTableElement.appendChild(document.createElement('tbody'))？
考虑到上述两个创建函数的存在，我假设有一个同样优雅的创建 TBody 的方法。
为什么？为什么要这样对自己？只附加一个 tbody 会更快、更易读，通过 innerHTML 注入它甚至更快、更简单（尽管这可能有一些缺点）
我这样做是因为innerHTML在IE中是只读的

标签： javascript html

【解决方案1】：

来自DOM Level 1 spec

接口HTMLTableElement

表上的创建和删除方法允许作者构造并修改表格。 HTML 4.0 规定每个 CAPTION 中只有一个， THEAD 和 TFOOT 元素可能存在于一张桌子。因此，如果存在一个，并且 createTHead() 或 createTFoot() 方法被调用，方法返回现有的 THead 或 TFoot 元素。

所以 createTHead 和 createTFoot 是方便的方法，不一定要进行实际的创建。

相比之下，表格元素可以有任意数量的<tbody>s，因此不需要特殊方法，HTMLTableElement.appendChild(document.createElement('tbody')) 可以很好地完成整个工作。

更新：在编写此答案时，createTBody() 已经添加到当时的 HTML5 草案标准的完整性，但没有实现，也不知道是否会有。事实上，Webkit 于 2012 年实现，Gecko 于 2013 年实现。

【讨论】：

这个.appendChild() 会放在任何现有的<thead></thead> 标记之后吗？
@webNoob13 - 是的。它将成为表格元素的最后一个子元素。如果您想在现有的 thead、tbody 或 tfoot 子项之前添加 .insertBefore()，则可以改用它。

【解决方案2】：

创建 THead 元素后，使用 HTMLTableElement.insertRow() 添加到表中的所有以下行都将添加到 THead 元素中。

我偶然发现了同样的行为，也找不到名为 HTMLTableElement.createTBody() 的函数（它不存在）。

但我发现insertRow()（或其他函数之一）似乎包含表状态逻辑，因为它会自动创建<tbody> - 除非<thead> 已经创建。

所以解决方案是（在 Windows 10 上使用 Firefox 62.0.2（64 位））先创建表体，然后创建表头：

var tbl = document.createElement('table');

// tbody
var tr = tbl.insertRow();
var tc = tr.insertCell();
var tt = document.createTextNode("tbody");
tc.appendChild(tt);


// thead
var th = tbl.createTHead();
var thr = th.insertRow();

if (true) {
  // works
  var thc = document.createElement('th');
  thr.appendChild(thc);
} else {
  // does not work
  var thc = thr.insertCell();
}

var tht = document.createTextNode("thead");
thc.appendChild(tht);

// tfoot
var tf = tbl.createTFoot();
var tfr = tf.insertRow();
var tfc = tfr.insertCell();
var tft = document.createTextNode("tfoot");
tfc.appendChild(tft);


// 
document.getElementById('target').appendChild(tbl);

body {
  background-color: #eee;
}

table {
  border: 2px solid white;
}

thead {
  background-color: red;
}

tbody {
  background-color: green;
}

tfoot {
  background-color: blue;
}

th {
  border: 2px solid green;
}

tr {
  /*background-color: #eee;*/
}

td {
  border: 2px solid black;
}

&lt;div id="target"&gt;&lt;/div&gt;

文档：

HTML

JavaScript

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

【讨论】：

【解决方案3】：

createTBody() 似乎还不是documented，但它至少在今天就在那里并且按预期工作：

let table = document.createElement('table');
console.log('empty table: ', table.outerHTML);
table.createTBody();
console.log('table with tbody: ', table.outerHTML);

预期输出：

empty table:  <table></table>
table with tbody:  <table><tbody></tbody></table>

【讨论】：