[FAQ] Définitions : innerText, innerHTML, outerText, outerHTML

Citation:

---

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

Code:

---

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:

---

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:

---

1 2 3 4

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

---

outerText : même chose que innerText (:question:)

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

Code:

---

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)

---

Citation:

---

Envoyé par Auteur

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.

Depuis HTML 5, outerHTML est valide.

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

Code:

---

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

---

Citation:

---

Envoyé par kylekatarnls

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

Code:

---

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

---

---

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

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 ? :whistle:

Citation:

---

Envoyé par 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 ? :whistle:

---

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.

Citation:

---

Envoyé par Auteur

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 ! :cry:

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

Code:

---

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

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:

---

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

---