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

[Auteur]

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

Code html :

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 :

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

Code x :

outerText : même chose que innerText ()

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

Code x :

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]

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.

[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 :

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