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 :

 
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:

 
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 ?
 
 
merci d'avance

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.

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

OK.
 
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...

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.

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

ça m'étonne qu'à moitié : je suis loin d'être un expert JS.
 
Comment devrais-je faire ?

Une liste concaténée avec join:
 

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.

le monsieur m'a grilled

fail

Je connaissais pas cette technique...
 
Je vais regarder ça.