Changement HTML HTML DOM JavaScript

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

modifier le flux de sortie HTML

JavaScript peut créer du contenu HTML dynamique :

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

Exemple

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Essayer par vous-même

Ne jamais utiliser document.write() après le chargement du document document.write(). Cela couvrira le document.

modifier le contenu HTML

La manière la plus simple de modifier le contenu d'un document HTML est d'utiliser innerHTML attribut.

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

document.getElementById(id).innerHTML = nouveau texte

Dans cet exemple, nous changeons <p> Contenu de l'élément :

Exemple

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Essayer par vous-même

Explication de l'exemple :

  • Le document HTML ci-dessus contient un élément <p> avec l'id="p1"
  • Nous utilisons HTML DOM pour obtenir cet élément avec l'id="p1"
  • JavaScript change le contenu de cet élément (innerHTML) en "Hello Kitty!"

Dans cet exemple, nous changeons <h1> Contenu de l'élément :

Exemple

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Essayer par vous-même

Explication de l'exemple :

  • Le HTML ci-dessus contient un élément <h1> avec l'id="header"
  • Nous avons utilisé HTML DOM pour obtenir l'élément avec l'id="header"
  • JavaScript change le contenu de cet élément (innerHTML)

Changer la valeur de l'attribut

Pour modifier la valeur d'un attribut HTML, utilisez la syntaxe suivante :

document.getElementById(id).attribut = nouvelle valeur

Dans cet exemple, nous changeons <img> de l'élément src Valeur de l'attribut :

Exemple

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Essayer par vous-même

Explication de l'exemple :

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