open

Travailler avec innerHTML

#1 Quand travailler avec innerHTML ? open

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 terme de performance. Donc si le contenu à créer est important ce 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 open

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 :

  1. Un premier élément HTML complet va être créé et va comprendre un nœud élément de constructeur HTMLHeadingElement lié à son nœud de type Text.
  2. Un deuxième élément complet va être créé avec un nœud de constructeur HTMLParagraphElement et lui aussi lié à son nœud de type Text.
  3. Ensuite le tout sera lié et accroché dans l'arbre au div sur 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.

Tester le code

#3 Précautions à prendre open

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.

Tester le code