innerHTML permet d’accéder au contenu HTML représenté sous forme de chaîne de caractères. En la modifiant, il est possible d'insérer des éléments HTML, du texte ou un mélange des deux dans une page web. Cette propriété est très utile pour mettre à jour dynamiquement le contenu d'un site sans avoir à recharger la totalité de la page.Définition
innerHTML
Une propriété des éléments DOM qui permet de définir ou de retourner le contenu HTML d'un élément.
DOM
Document Object Model, une interface de programmation qui permet d'accéder aux documents HTML et XML ainsi que de les manipuler.
Fonctionnement de innerHTML
La propriété
Manipulations de base avec innerHTML
Lecture du contenu
Lire le contenu d'un élément en utilisant la propriété
innerHTML est simple : il suffit d'accéder à cette propriété par l'intermédiaire du DOM. Par exemple, document.getElementById('monElement').innerHTML renvoie le contenu HTML de l'élément avec l'id 'monElement'.Modification du contenu
Pour modifier le contenu d'un élément, assignez une nouvelle valeur à sa propriété
innerHTML : document.getElementById('monElement').innerHTML = 'Nouveau contenu'; remplacera l'ancien contenu par 'Nouveau contenu'. Cette méthode permet d'insérer dynamiquement des balises HTML telles que des titres, du texte en italique, ou bien d'autres éléments.Précautions à prendre
L'utilisation de
innerHTML présente quelques risques, notamment en matière de sécurité. Une insertion non maîtrisée de contenu peut exposer le site aux attaques par injection de code JavaScript, connues sous le nom de Cross-Site Scripting (XSS). Pour se prémunir contre cela, il est crucial d'assainir tout contenu externe ou d'user d'autres méthodes plus sûres d'insertion, comme l'API DOM ou TextContent.Avantages et inconvénients
Avantages
L'un des principaux avantages de
innerHTML est sa simplicité d'utilisation, permettant de manipuler le contenu de la page très rapidement. C'est également une méthode performante pour des mises à jour massives d'un document, car l'évaluation du HTML inséré se fait en une seule fois et non élément par élément.Inconvénients
Cependant,
innerHTML n'est pas sans défauts. Parmi ses inconvénients, on note notamment la réinitialisation de l'état des éléments insérés, ce qui peut conduire à la perte d'événements ou de données associés à ces éléments (comme dans les champs de formulaire). De plus, elle ne permet pas d'ajouter de façon incrémentielle des éléments sans devoir recharger l'intégralité du contenu de l'élément cible.A retenir :
Utiliser la propriété
innerHTML est une méthode rapide et simple pour modifier le contenu HTML d'un élément sur une page web. Malgré ses nombreux avantages, tels que la facilité d'utilisation et la performance, elle présente aussi des risques de sécurité (notamment les attaques XSS) et des limitations fonctionnelles (comme l'impossibilité de manipuler de manière incrémentale les éléments). Une utilisation prudente de innerHTML, en conjonction avec d'autres pratiques de programmation sécurisées, est recommandée pour en tirer le meilleur parti tout en évitant les risques. 
