Discussion :

[kernelfailure]

Salut,

Ca fait un petit moment que mon œil est attiré par des commentaires conseillant à certains de ne pas utiliser document.write() ou innerHTML...

J'ai demandé ce qui motivait ce genre de conseil, mais je n'en sais pas plus pour le moment.
Alors je cherche encore, car pour ce que j'en sais : Cette méthode et cette propriété fonctionnent très bien, et rien ne justifie un tel rejet.

A ce jour, la seule chose qui semble corroborer ce désire de ne "plus" les utiliser semble venir d'ici : Avoid document.write() and innerHTML().

Où un mauvais exemple (Si mauvais que ça ne fonctionnera pas) est donné, avec paragraphe et liste invalides :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function fillContent() {
	document.write("<h1>Welcome to my site</h1>");
	document.write("<p>Lorem ipsum dolor sit amet");
	document.menu.innerHTML = "<ul><li><a href="foo.html">foo</a>";
}

Puis il est suggèré d'utiliser le code ci-dessous pour produire (?!?) le même résultat, tout en étant valide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fillContent() {
	// parentelem is a specified element in the DOM
	var header = document.createElement("h1");
	header.insertText("Welcome to my site");
	var para = document.createElement("p");
	para.insertText("Lorem ipsum dolor sit amet");
	var list = document.createElement("ul");
	itemone = document.createElement("li");
	itemonelink = document.createElement("a");
	itemonelink.setAttribute("href","foo.html");
	itemonelink.insertText("foo");
	list.appendChild(itemone);
	parentelem.appendChild(header);
	parentelem.appendChild(para);
	parentelem.appendChild(list);
}

Bref ! Soyons clair dans ce genre de recommandations :
l'utilisation de document.write() et innerHTML doit être soumis à la condition de bien former son document.
C'est à dire qu'il soit validé par DOM.

N.B. : Si vous êtes convaincu que la préconisation donnée fait exactement la même chose que le mauvais exemple donné par le W3C, je pense que même l'utilisation de DOM ne viendra pas à votre secours

Alors, est-ce la seule motivation pour inciter à ne pas utiliser document.write() et innerHTML ?
Si c'est la seule, il n'y a vraiment pas de quoi torpiller cette méthode et cette propriété. Sinon, autant ne pas conseiller d'écrire de page HTML et de tout faire par DOM.

[nod__]

"rien ne justifie un tel rejet." bah si, après on est d'accord ou pas mais il y quelques arguments objectifs.


document.write y'a pas d'excuses. Le comportement est chelou, il induit en erreur en plus d'etre casse-cou pour le navigateur.

innerHTML faut pas faire le boulet avec, et la bonne forme du contenu ajouté n'est pas suffisant pour une bonne utilisation (bien que ça soit nécessaire). Pour ce qui est des performances y'a même pas de débat, l'un et l'autre ont leurs utilisations.

innerHTML pour le travail de bourrin : rajouter 200 élements bien complexes à un noeud, vider un noeud de tous ses enfants.

Le DOM pour le travail en finesse. insérer un noeud avant un autre, après un autre, déplacer un élement dans l'arbre, cloner un autre etc.

c'est pas tout noir et blanc non plus. Le document que tu donnes en lien parle d'accessibilité. Ils te disent que c'est pas bon dans ce cadre là hé bien ce n'est pas bon dans ce cadre là. Dans un autre le problème est différent.

[kernelfailure]

document.write y'a pas d'excuses. Le comportement est chelou, il induit en erreur en plus d'etre casse-cou pour le navigateur.

Les seuls trucs chelou que j'ai pu voire avec un document.write(), c'est ce que voulait faire le programmeur.
La plus part de ceux-là oublient tout simplement qu'ils travaillent dans un document... Composé ou en composition.

Pour le travail "en finesse" ou "à la bourrin", c'est plutôt lié à la manière de coder et à son appréciation qu'à l'utilisation de couche applicative particulière.

c'est pas tout noir et blanc non plus. Le document que tu donnes en lien parle d'accessibilité. Ils te disent que c'est pas bon dans ce cadre là hé bien ce n'est pas bon dans ce cadre là. Dans un autre le problème est différent.

Ce document est pour le moment le seul que j'ai trouvé où il est préconisé d'utiliser DOM plutôt que document.write() et innerHTML de manière argumenté.
La raison qui est ici invoquée (Que je trouve particulièrement faiblarde) est : Quand on connait pas la norme HTML, on utilise DOM.
Et pourquoi pas utiliser Word tant qu'on y est ? Ben, wouai ! Ca fait des docs normées en HTML.

[RomainVALERI]

Quand on connait pas la norme HTML, on utilise DOM.

L'accès, la modification, et la récupération (par un submit notamment) d'éléments ajoutés dans la page avec document.write ou Element.innerHTML posent de nombreux problèmes, fais quelques recherches sur ces forums pour t'en convaincre : les "victimes" ne sont, contrairement à tes propos, pas toujours de malheureux noobs illettrés infouttus de coder trois balises dans une page.

Une fois sur deux, quand quelqu'un vient écrire un post (exemple) disant "au secours mon formulaire ne renvoie pas les bonnes valeurs !" ... on lui demande de nous montrer son code : tiens tiens que vois-je ainsi sous mes yeux éclatés : l'insertion dynamique d'un select sans utiliser les fonctions DOM... étonnant, non ? ^^

[kernelfailure]

...les "victimes" ne sont, contrairement à tes propos, pas toujours de malheureux noobs illettrés infouttus de coder trois balises dans une page.

Jamais je n'aurais osé affirmer ça. Tout le monde fait et à droit de faire des erreurs. Noobs ou plus

Une fois sur deux, quand quelqu'un vient écrire un post (exemple) disant "au secours mon formulaire ne renvoie pas les bonnes valeurs !" ... on lui demande de nous montrer son code : tiens tiens que vois-je ainsi sous mes yeux éclatés : l'insertion dynamique d'un select sans utiliser les fonctions DOM... étonnant, non ? ^^

Jette un oeil sur le site de la RATP, tu verra une belle aberration fonctionner...

Pour ton exemple, ce qui me surprend, c'est qu'à aucun des derniers ".append" n'apparait de "onchange" sur les nouveaux select...
Par ailleurs, je trouve risqué de provoquer une éventuelle collision d'id.

[Bovino]

Jette un oeil sur le site de la RATP, tu verra une belle aberration fonctionner...

Ca n'a strictement rien à voir... RomainVALERI te parle de l'insertion dynamique de champs de formulaire en vue d'une soumission vers le serveur, toi tu nous montres une autocomplétion dont le seul but est de remplir un champ déjà existant...
Pour info, IE accepte très difficilement l'attribution dynamique de l'attribut name et jamais avec innerHTML, donc si tu dois ajouter un champ à ton formulaire, il ne faut pas passer par innerHTML (car pas de name, pas d'envoi).