Travailler avec innerHTML
#1
Quand travailler avec innerHTML ?
Cette méthode est très pratique pour de petites modifications du document. Elle évite d'avoir recours aux méthodes de création et d'insertion des nœuds dans un arbre DOM. Son utilisation a un coût en termes de performance. Donc si le contenu à créer est important, ça ne sera pas forcément le meilleur choix.
Par ailleurs, la propriété innerHTML ne fait pas partie de la spécification de l'interface DOM du W3C. Il s'agissait au départ d'une propriété Microsoft qui s'est imposée "de fait" et qui est présente sur tous les navigateurs actuels. ( Voir CanIuse )
#2
Exemple d'utilisation de innerHTML
Dans le script ci-dessous, on récupère l'objet correspondant à l'élément div en utilisant la méthode querySelector.
On prend la propriété innerHTML de l'élément récupéré et on lui affecte une chaîne de caractères. Et c'est suffisant pour placer le code HTML du titre et du paragraphe dans le div. Donc ça veut dire que quelque part, la chaîne est analysée par l'interpréteur JavaScript, et que des nœuds sont créés et placés directement dans l'arbre.
Dans l'exemple ci-dessous, voilà ce qui va être fait :
- Un premier élément HTML complet va être créé et va comprendre un nœud élément de constructeur
HTMLHeadingElementlié à son nœud de typeText. - Un deuxième élément complet va être créé avec un nœud de constructeur
HTMLParagraphElementet lui aussi lié à son nœud de typeText. - Ensuite le tout sera lié et accroché dans l'arbre au
divsur lequel on a utilisé la propriétéinnerHTML.
Tout cela est fait avec une simple affectation. Si vous comparez avec le travail qui doit être fait, pour faire la même chose, avec les méthodes de l'objet Node alors InnerHTML a un côté pratique incontestable.
#3
Précautions à prendre
Il faut que la chaîne de caractères soit d'une taille raisonnable pour que le code reste lisible. Si le contenu est important, vous pouvez procéder par concaténations successives, mais c'est là, qu'il faudra faire attention aux performances.
Attention, vous devez maîtriser la chaîne de caractères que vous affectez à innerHTML, c'est-à-dire que vous devez être le seul à la manipuler. Regardez, si par exemple, vous affectez une chaîne de caractères saisie par un utilisateur. Ce dernier peut en profiter pour exécuter du code JavaScript à votre insu.
Ci-dessous, la chaîne de caractères saisie permet de mettre en place un gestionnaire d'événement et un alert est affiché. Il suffit de remplacer la chaîne 'HA HA HA' par un document.cookie pour voir le cookie de session s'afficher.
