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.