Add to a table with Javascript

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.

Answers


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

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

Need Your Help

OpenTBS RTL issue

php ms-word docx opentbs tinybutstrong

I'm using OpenTBS plugin for TinyButStrong to fill docx templates with data using PHP.

Resize issue to fit dynamically with any browser size

actionscript-3 browser events resize size

I'm trying to make full flash site dynamically resize in any browser size.