Ajouter à une table avec Javascript

Question

J'ai une table qui ressemble à ceci:

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

• thead est rempli de contenu

• tbody est vide

Je veux pour utiliser Javascript pour ajouter ceci (par exemple) à t_tbody:

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

Comment est-ce que je peux faire ceci? J'ai besoin d'une fonction qui ajoute le dessus à t_tbody.

Notez que l'utilisation simplement

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

fonctionne très bien dans Firefox, mais pas dans IE.

Notez également que j'ai besoin d'utiliser du Javascript brut (c'est-à-dire sans cadre) pour ce projet, car je suis en train de terminer un projet qui a déjà été terminé en utilisant du Javascript brut.

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

La réponse par Grégoire est en effet la façon la plus « correcte » de le faire, mais ne note que IE ne semble pas se plaindre si vous modifiez innerHTML des éléments non encore dans les DOM. Ainsi, la solution pourrait être réduite à:

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

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

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