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 a开发者_如何学Godds 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.
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);
精彩评论