Is it possible to create TH with TableRow.insertCell ()?

Question

I am adding new rows to the table dynamically using this code:

tbody = document.getElementById('tbody'); tr = tbody.insertRow(-1); tr.id = 'last'; th = tr.insertCell(0); td = tr.insertCell(1); 

But I actually have two td cells. I want th , as you can see.

It states that the tagName property cannot be changed.

How can i do this?

Do I need to use "regular" methods like createElement and appendChild ?

Answer 1

I do not see official documents that will allow you to do this.

W3C Documentation for TR / TR.insertCell

createElement/appendChild will work.

Answer 2

What I am doing is defining the first one, for example TableHeaderRow thr = new TableHeaderRow (); Add a cell to it, then add it to the table.

Answer 3

a quick and working approach will use <b></b> in innerHtml

 tbody = document.getElementById('tbody'); tr = tbody.insertRow(-1); tr.id = 'last'; td = tr.insertCell(1); th = tr.insertCell(0); th.innerHtml = '<b>th cell1</b> th = tr.insertCell(1); th.innerHtml = '<b>th cell2</b> //and so on