[ACCEPTED]-How do I create the TBody tag in a Table with pure JavaScript?-html

Accepted answer

Score: 22

From the DOM Level 1 spec

Interface HTMLTableElement

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

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

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

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

Score: 6

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

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

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

So the solution is (working 3 with Firefox 62.0.2 (64-bit) on Windows 2 10) to create the table body first and then 1 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

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

Score: 4

createTBody() does not seem to be documented yet, but it is there 2 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 1 output:

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

Source: stackoverflow.com

[ACCEPTED]-How do I create the TBody tag in a Table with pure JavaScript?-html

How to detect which one of the defined font was used in a web page?

jQuery / Javascript replace <space> in anchor link with %20

Creating heatmaps using <canvas> element?

Why would I put an ID on a script tag?

HTML input box without a form

Google Maps API v3: InfoWindow not sizing correctly

How do you make something to appear slowly on a page using Javascript?

Javascript trivia: check for equality against the empty object

How to find the parent element using javascript

how can i put an image into select?