DOM : Comportement de InsertRow

Différence de comportement entre Chrome d'un côté et Firefox / IE de l'autre lors de la création / insertion de ligne dans un tableau.

Essayons de créer un tableau de 10 lignes, chacune ne contenant qu'une cellule avec un numéro allant de 1 à 10. Nous allons pour cela utiliser l'API DOM permettant d'insérer des lignes dans une table, insertRow :

var table = document.createElement('table'),
    row,
    cell,
    i;
for (i = 0; i < 10; i++) {
    row = table.insertRow();
    cell = row.insertCell();
    cell.appendChild(document.createTextNode(i+1));
}
document.body.appendChild(table);
Création d'un tableau.

Dans Firefox (24) et Internet Explorer (10), nous aurons des insertions de lignes de 1 à 10 ; par contre avec Chrome (26-30) la numérotation ira de 10 à 1. Pourquoi ?

Dans les spécifications DOM 2, la méthode insertRow prend en paramètre l'index auquel on souhaite insérer la ligne; il est obligatoire ; une exception est d'ailleurs émise s'il n'est pas fournit - c'est ce qui se passe sous Firefox 4 par exemple. En HTML 5 par contre, le paramètre devient facultatif et sa valeur par défaut est -1. Dans les 2 cas, si l'index est -1, la ligne est ajoutée en fin du tableau. C'est ce comportement que l'on observe sous Firefox et Internet Explorer dans notre exemple. Chrome lui ne respecte aucune des 2 spécifications : soit il devrait interdire l'usage de la méthode sans paramètres et émettre une exception, soit il l'autorise et suppose que l'index par défaut est -1 et non 0.

Donc, pour avoir un comportement adéquate, il faut impérativement préciser l'index d'insertion dans la méthode insertRow :

row = table.insertRow(-1);
Toujours préciser l'index d'insertion d'une ligne.

HTMLTableElement.insertRow. Mozilla Developer Network,

STENBACK, Johnny ; LE HÉGARET, Philippe ; LE HORS, Arnaud. Document Object Model (DOM) Level 2 HTML Specification. W3C, . Interface HTMLTableElement

HICKSON, Ian ; BERJON, Robin ; FAULKNER, Steve, et al.. HTML 5. W3C, . 4.9 Tabular data