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

user_388916 0
Viewed 27331

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?

html javascript
3 Answers

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

JavaScript

user_16194320

createTBody() does not seem to be documented yet, but it is there at least as of today and works as expected:

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

Expected output:

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