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

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 tagNa开发者_开发问答me property isn't changeable.

How can I do this?

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

---

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.

---

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);

---

What I do is define the th first, such as TableHeaderRow thr = new TableHeaderRow(); Add cell to it, then add it to the table.

---

a fast and working approch would be using a <b></b> tag in the 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