Add to a table with javascript

Question

I have a table which looks like this:

<table id='t'>
    <thead>
        ....
    </thead>
    <tbody id='t_tbody'>
    </tbody>
</table>

• thead is filled with content

• tbody is empty

I want to use javascript to add this (for example) to t_tbody:

<tr>
    <td>Name</td>
    <td>Points</td>
    <td>Information</td>
</tr>

How can I do this? I need a function which adds the above to t_tbody.

Note that simply using

document.getElementById('t_tbody').innerHtml+="<tr>...</tr>"

works fine in FF, but not in IE.

Also note that I need to use raw javascript (ie. no frameworks) for this project, as I am finishing a project which has already been mostly completed using raw javascript.

Answer 1

var tr = document.createElement("tr");

var td = document.createElement("td");
td.innerHTML = "Name";
tr.appendChild(td);

var td2 = document.createElement("td");
td2.innerHTML = "Points";
tr.appendChild(td2);

var td3 = document.createElement("td");
td3.innerHTML = "Information";
tr.appendChild(td3);

document.getElementById('t_tbody').appendChild(tr);

Answer 2

The answer by Gregoire is indeed the most "correct" way of doing this, however do note that IE does not seem to complain if you are editing innerHTML of elements not yet in the DOM. Thus the solution could be shortened to:

var tr = document.createElement('tr');

tr.innerHTML = "<td>Name</td><td>Points</td><td>Information</td>";

document.getElementById('t_tbody').appendChild(tr);