[JS] innerHTML ou DOM ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] innerHTML ou DOM ?

franceso

[:zytra] Salut les progueux !

Je suis en train de bosser sur un petit projet perso dans lequel je voudrais générer automatiquement en JS du contenu HTML de ma page. C'est pas du AJAX ni rien de compliqué, c'est juste une génération automatique de listes et de liens à partir de données qui sont stockées dans un JSON externe.

Au début, j'avais commencé à coder tout ça avec du innerHTML, genre :

Code :

var html = "<ul>";
for (var i in data) {
html = html + "<li>" + data[i] + "</li>";
}
html = html + "</ul>";
document.getElementById("mon_id" ).innerHTML = html;

Puis j'ai découvert que innerHTML n'était pas standard et qu'il valait mieux utiliser le DOM, alors j'ai tout réécrit comme ça:

Code :

var ul = document.createElement('ul');
for (var i in data) {
var li = document.createElement('li');
li.appendChild( document.createTextNode(data[i]));
ul.appendChild(li);
}
document.getElementById("mon_id" ).appendChild(ul);

Et puis j'ai continué de me renseigner et j'ai trouvé sur le net tout et son contraire : certains disent que innerHTML est plus efficace et mieux supporté en pratique, d'autres disent que la seule manière valide est d'utiliser le DOM qui est un standard. :??:

Finalement que me conseillez-vous ? Y a-t-il selon vous une meilleure manière de procéder ?

:jap: merci d'avance

---------------
TriScale innov

Publicité

gatsu35

Blablaté par Harko

pour bosser depuis plus de 2 ans sur des gros projets (site ou applications ajax) je peux t'affirmer, qu'il n'y a rien de plus rapide que le innerHTML quand on doit généré quantité astronomique de contenu (genre une liste de 800 contacts).

Ensuite si tu dois juste générer 2/3 bricole, tu peux très bien utiliser le dom, ce qui te permettra de rajouter des methodes/Events sur les objets plus facilement.

Skateinmars

La plupart des frameworks utilisent DOM pour ce genre de fonctions mais innerHTML est bien plus rapide :jap: à voir selon les besoins donc

---------------
Feedback HAV

franceso

OK.

:jap: Merci à vous deux. Je vais donc (au moins dans un premier temps) rester sur innerHTML.

Je jette aussi un coup d'oeil aux frameworks pour voir s'il y en a d'intéressants...

---------------
TriScale innov

tpierron

innerHTML est effectivement vachement plus rapide que DOM. Faut quand même faire gaffe avec l'injection de script (XSS), alors qu'avec DOM pas de problème pour transmettre n'importe quelle chaine à un createTextElement.

J'ai aussi ouïe dire qu'innerHTML sera enfin inclus dans les specs d'HTMLv5, donc à priori ça risque pas de passer en "deprecated" de sitôt.

masklinn

í dag viðrar vel til loftárása

Et accessoirement dans ton exemple d'innerHTML le HTML est créé n'importe comment, ça va ramer

Message cité 1 fois

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

franceso

masklinn a écrit :

Et accessoirement dans ton exemple d'innerHTML le HTML est créé n'importe comment, ça va ramer

:sweat: ça m'étonne qu'à moitié : je suis loin d'être un expert JS.

Comment devrais-je faire ?

Message cité 1 fois

---------------
TriScale innov

masklinn

í dag viðrar vel til loftárása

franceso a écrit :

:sweat: ça m'étonne qu'à moitié : je suis loin d'être un expert JS.

Comment devrais-je faire ?

Une liste concaténée avec join:

Code :

var html = ["<ul>"];
for(var item in data) {
    html.push("<li>" );
    html.push(data[item]);
    html.push("</li>" );
}
html.push("</ul>" );
 
document.getElementById("mon_id" ).innerHTML = html.join("" );

Ca permettra de créer beaucoup moins de chaînes de caractères, donc de bouffer moins de mémoire et d'aller plus vite.

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

gatsu35

Blablaté par Harko

le monsieur m'a grilled

Message cité 1 fois
Message édité par gatsu35 le 09-04-2008 à 16:37:54

masklinn

í dag viðrar vel til loftárása

gatsu35 a écrit :

dans la boucle à chaque fois que tu fais

Code :

html = html + "blabla"

tu récréé un instance String, ce qui est assez consommateur en perf. Le mieux est de push ta string dans un tableau, et au final tu join l'ensemble

Code :

var html = ["<ul>"];
for (var i in data) {
html.push("<li>" + data[i] + "</li>" );
}
html.push("</ul>" );
document.getElementById("mon_id" ).innerHTML = html.join("" );

fail

Message édité par masklinn le 09-04-2008 à 16:35:38

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Publicité

franceso

:jap: Je connaissais pas cette technique...

Je vais regarder ça.

---------------
TriScale innov

FORUM HardWare.fr

Programmation

HTML/CSS

[JS] innerHTML ou DOM ?

Sujets relatifs
XML DOM avec PHP	Modification innerHTML d'un select
[JS] document.getelementById(obj).innerHTML ne foncitonne pas sous IE	DOM PHP equivalent de innerHTML
DOM ->String	[PHP][DOM] balises select non envoyé au serveur
jQuery lent ?	balise IMG dimensions fausses, difference entre HTML & DOM, sous IE
Attacher une fonction avec THIS sur un evenement en DOM
Plus de sujets relatifs à : [JS] innerHTML ou DOM ?

Page générée en 0.069 secondes