DEVENIR-WEBMASTER.COM Log In
 21
open

Travailler avec innerHTML

# Quand travailler avec innerHTML ? open

La propriété innerHTML ne fait pas partie du standard DOM. Il s'agissait au départ d'une propriété Microsoft qui s'est imposée et est présente "de fait" sur tous les navigateurs actuels. ( Voir CanIuse )

Elle est très pratique pour de petite modification 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. Par exemple éviter de l'utiliser dans une boucle de création d'un important contenu.

# 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 getElementsByClassName. Vous voyez qu'il y a un pluriel sur le Elements ca peut nous aider à en déduire qu'on récupère un tableau. Donc on accède à notre div en prenant le premier élément du tableau.

On ajoute directement le code HTML du paragraphe et du lien au contenu actuel du div. On procède par concaténation de chaînes de caractères. Le côté pratique est incontestable. On fera dans un prochain script la même chose en ayant recours aux méthodes de l'objet Node.

Tester le code

# La même chose avec les méthodes de l'objet Node open

Ci dessous à titre de comparaison on va faire la même chose en utilisant les méthodes de l'objet Node. On se rend compte que pour une petite modification c'est quand même beaucoup plus lourd...mais c'est dans la norme.

Dans le script ci-dessous à noter la possibilité de mettre les appels à appendChild() en cascade.

Tester le code