JavaScript HTML DOM - Modification du HTML
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 consiste à utiliser la innerHTML
propriété.
Pour modifier le contenu d'un élément HTML, utilisez cette syntaxe :
document.getElementById(id).innerHTML = new HTML
Cet exemple modifie le contenu d'un <p>
élément :
Exemple
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Exemple expliqué :
- Le document HTML ci-dessus contient un
<p>
élément avecid="p1"
- Nous utilisons le DOM HTML pour obtenir l'élément avec
id="p1"
- Un JavaScript change le contenu (
innerHTML
) de cet élément en "Nouveau texte !"
Cet exemple modifie le contenu d'un <h1>
élément :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Exemple expliqué :
- Le document HTML ci-dessus contient un
<h1>
élément avecid="id01"
- Nous utilisons le DOM HTML pour obtenir l'élément avec
id="id01"
- Un JavaScript change le contenu (
innerHTML
) de cet élément en "New Heading"
Modification de la valeur d'un attribut
Pour modifier la valeur d'un attribut HTML, utilisez cette syntaxe :
document.getElementById(id).attribute = new value
Cet exemple modifie la valeur de l'attribut src d'un <img>
élément :
Exemple
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Exemple expliqué :
- Le document HTML ci-dessus contient un
<img>
élément avecid="myImage"
- Nous utilisons le DOM HTML pour obtenir l'élément avec
id="myImage"
- Un JavaScript change l'
src
attribut de cet élément de "smiley.gif" à "landscape.jpg"
Contenu HTML dynamique
JavaScript peut créer du contenu HTML dynamique :
Date : Sam 29 janvier 2022 21:25:09 GMT+0000 (Temps universel coordonné)
Exemple
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write()
En JavaScript, document.write()
peut être utilisé pour écrire directement dans le flux de sortie HTML :
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Ne jamais utiliser document.write()
après le chargement du document. Cela écrasera le document.