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

Question

I'm adding new rows to a table dynamically, with this code:

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

But what I actually got are two td cells. I want a th, as you can see.

It says the tagName property isn't changeable.

How can I do this?

Will I need to use 'normal' methods like createElement and appendChild?

Answer 1

I don't see any official docs that allow you to do this.

W3C Documentation for TR / TR.insertCell

The createElement/appendChild will work though.

Answer 2

I got it to work this way:

var table = d3.select("#table");
    table.html("");
    head = table.append("tr");
    head.append("th").text("column_header_1");
    head.append("th").text("column_header_2");

    chartData.forEach(function (obj) {
        row = table.append("tr");
        row.append("td").text(obj.datapoint_1);
        row.append("td").text(obj.datapoint_2);