How do I create the TBody tag in a Table with pure JavaScript?

Question

How is a TBody tag created within a Table tag using pure JavaScript? (No manual tampering with HTML code). There is the HTMLTableElement.createTHead() and HTMLTableElement.createTFoot() functions, but no functions concerning the TBody element. To add to this, once you've created a THead element, all the following rows added to the table using HTMLTableElement.insertRow() are added to the THead element.

How then would you go about creating a TBody element below the THead without manually tampering with the HTML?

Answer 1

From the DOM Level 1 spec

Interface HTMLTableElement

The create and delete methods on the table allow authors to construct and modify tables. HTML 4.0 specifies that only one of each of the CAPTION, THEAD, and TFOOT elements may exist in a table. Therefore, if one exists, and the createTHead() or createTFoot() method is called, the method returns the existing THead or TFoot element.

So createTHead and createTFoot are convenience methods that don't necessarily do an actual create.

In contrast, table elements can have as many <tbody>s as you like so thare's no need for a special method, and HTMLTableElement.appendChild(document.createElement('tbody')) will do the complete job just fine.

---

Update: At the time this answer was written createTBody() had already been added for completeness to the then HTML5 draft standard, but there were no implementations, and it wasn't known if there ever would be. In fact, Webkit implemented in 2012 and Gecko in 2013.

Answer 2

once you've created a THead element, all the following rows added to the table using HTMLTableElement.insertRow() are added to the THead element.

I stumbled across the same behavior and could not find a function called HTMLTableElement.createTBody() either (it does not exist).

But I found out that insertRow() (or one of the other functions) seems to include table state logic, as it will create <tbody> automatically - unless <thead> has been created already.

So the solution is (working with Firefox 62.0.2 (64-bit) on Windows 10) to create the table body first and then create the header:

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;
}

<div id="target"></div>

Docs:

HTML

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

JavaScript

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