Discussion :

[Auteur]

Q : Définitions innerText, innerHTML, outerText, outerHTML
R :
exemple :

Code html :

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

1
2
3
 
 
<p id="pg">coucou <b>tout le monde</b></p>

innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte (supprime toutes la balises contenues dans le texte récupéré).

Code x :

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

1
2
3
4
document.getElementById("pg").innerText 
retourne 
coucou tout le monde

innerHTML : récupère le contenu entre deux balises avec formatage (laisse les éventuelles balises contenues dans le texte).

Code x :

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

1
2
3
4
document.getElementById("pg").innerHTML 
retourne 
coucou <b>tout le monde</b>

outerText : même chose que innerText ()

outerHTML : même chose que innerHTML mais prend également les balises qui encadrent le texte

Code x :

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

1
2
3
4
document.getElementById("pg").outerHTML 
retourne
<p id="pg">coucou <b>tout le monde</b></p>

Remarques :
innerText, outerText et outerHTML sont obsolètes
utiliser innerHTML (d'ailleurs Firefox ne reconnait que cette fonction)

Par ailleurs, pour ajouter de nouveaux éléments (select, div, p, span, a, form, input, etc...), il est vivement conseillé d'utiliser les méthodes du DOM (cf. ce tutotriel)

[Hibou57]

Par ailleurs, pour ajouter de nouveaux éléments (select, div, p, span, a, form, input, etc...), il est vivement conseillé d'utiliser les méthodes du DOM

Le DOM est peut-être également plus efficace à l'execution. En effet, pour ajouter un élément E avec innerHTML, dans sur un source A, il faut séparer A en deux A1 et A2, qui sont des copies chacun d'une partie de A, et ensuite copier dans une autre variable le resultat A1 + E + A2, avant de l'affecter à sa place dans le document. D'où une consomation de mémoire supplémentaire, d'autant plus importante que A est volumineux (ce qui se fait formtement ressentir sur les machines modestes), et un temps d'execution évidement plus long, et finalement des réactions moins fluide, surtout si l'application fait un usage intentif des suppression/creation d'élément pendant la vie de la page (c'est-à-dire pas seulement à son initialisation).

Donc le DOM, oui, et pas seulement parce que c'est le DOM et que c'est plus propre selon certains critères, mais aussi parce que c'est plus econome en resource mémoire et processeur.

[kylekatarnls]

Depuis HTML 5, outerHTML est valide.

Et innerHTML (mais pas outerHTML) peut être utilisé pour modifier le contenu HTML de l'élément :

Code :

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

document.getElementById("pg").innerHTML="un autre <b>contenu</b>";

[Auteur]

Et innerHTML (mais pas outerHTML) peut être utilisé pour modifier le contenu HTML de l'élément :

Code :

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

document.getElementById("pg").innerHTML="un autre <b>contenu</b>";

moui... à utiliser avec parcimonie tout de même

[vermine]

Et pourquoi ne pas en faire un article explicatif entre l'avant et l'après ? Ou bien une ou plusieurs Q/R pour la Faq ?

[Auteur]

Et pourquoi ne pas en faire un article explicatif entre l'avant et l'après ? Ou bien une ou plusieurs Q/R pour la Faq ?

entre l'avant et l'après ? C'est à dire ? Entre la définition postée en 2007 et la définition de 2012 ?


Pour le DOM vs innerHTML :
je pense que l'on peut tolérer innerHTML pour insérer un texte court et des balises utilisées pour la mise en forme (<b> <i> <u>).

Sinon pour insérer des éléments plus complexes (<div> <span> <p>...) il faut impérativement passer par le DOM. Même chose pour les tableaux (<table> <td> <tr> etc. ) et les listes (<select> <option>), les formulaires. Je vois encore trop souvent des innertHTML pour insérer des tableaux ou des des listes dans une page pour un résultat médiocre.

[pebayart]

Sinon pour insérer des éléments plus complexes [...] il faut impérativement passer par le DOM. Même chose pour [...] les listes (<select> <option>), les formulaires. Je vois encore trop souvent des innertHTML pour insérer des tableaux ou des des listes dans une page pour un résultat médiocre.

Oh !

J'utilise innerHTML avec AJAX pour insérer une chaine contenant des balises OPTIONS dans un SELECT ... :

Code :

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

1
2
3
4
5
6
7
8
9
new Ajax.Request('lire_bdd.php', {
	method: 'post',
	parameters: {table: tabdd, id: id_bdd},
	onSuccess: function(transport) {
		$(cat).innerHTML = transport.responseText;
		$(cat).style.display='inline';
		},
	onFailure: function() { alert('Requête échouée.') }
	});

il existe quelque chose pour le remplacer par quelque chose de plus propre utilisant le DOM ?

merci pour votre attention,
pierre

[NoSmoking]

Bonjour,
si tu utilises une bibliothèque, ce qui a 'air d'être le cas, passes par les méthodes fournies par celle ci, tu n'auras pas de question à te poser

Code :

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

$(cat).update(transport.responseText); // pour prototype