Le DOM HTML permet à JavaScript de modifier le contenu des éléments HTML.

Modification du contenu HTML

Le moyen le plus simple de modifier le contenu d’un élément HTML est d’utiliser la commande innerHTML propriété.

Pour modifier le contenu d’un élément HTML, utilisez cette syntaxe :

Cet exemple modifie le contenu d’un <p> élément:

Exemple expliqué :

• Le document HTML ci-dessus contient un <p> élément avec id="p1"
• Nous utilisons le DOM HTML pour obtenir l’élément avec id="p1"
• Un JavaScript modifie le contenu (innerHTML) de cet élément à “Nouveau texte !”

Cet exemple modifie le contenu d’un <h1> élément:

Exemple expliqué :

• Le document HTML ci-dessus contient un <h1> élément avec id="id01"
• Nous utilisons le DOM HTML pour obtenir l’élément avec id="id01"
• Un JavaScript modifie le contenu (innerHTML) de cet élément à “Nouveau titre”

Modification de la valeur d’un attribut

Pour modifier la valeur d’un attribut HTML, utilisez cette syntaxe :

Cet exemple modifie la valeur de l’attribut src d’un <img> élément:

Exemple expliqué :

• Le document HTML ci-dessus contient un <img> élément avec id="myImage"
• Nous utilisons le DOM HTML pour obtenir l’élément avec id="myImage"
• Un JavaScript change le src attribut de cet élément de “smiley.gif” à “landscape.jpg”

Contenu HTML dynamique

JavaScript peut créer du contenu HTML dynamique :

document.write()

En JavaScript, document.write() peut être utilisé pour écrire directement dans le flux de sortie HTML :