Pour ajouter des éléments dans du HTML, il y a deux écoles. L'ancienne, à la rache, avec le innerHTML et la nouvelle, pro, proche de ce qu'on peut faire en c# avec le appendChild.
Andrew Hedges a fait un petit comparatif de performances en fonction du navigateur et il en ressort qu'il n'est pas possible de privilégier l'une ou l'autre solution !
La manipulation de div dans un éléments 10 000 fois donne des résultats assez disparates. J'en ai profité pour ajouter dans le tableau le résultat sans appel avec Google Chrome.
| |
innerHTML |
DOM replacement |
innerHTML + DOM |
| Google Chrome Beta |
179
|
265
|
245
|
| Safari 3 |
109
|
104
|
96
|
| Safari 2 |
489
|
849
|
457
|
| Firefox 3b4 |
1588
|
1030
|
523
|
| Firefox 2 |
1386
|
1019
|
401
|
| IE 8b1 |
900
|
2131
|
844
|
| IE 7 |
290
|
1275
|
475
|
| IE 6 |
339
|
1880
|
373
|
| Opera 9.27 |
266
|
847
|
675
|