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 Firefox, but not in IE.

Also note that I need to use raw Javascript (i.e. 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);