JavaScript HTML DOM - Modification du HTML

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

Modification du flux de sortie HTML

JavaScript peut créer du contenu HTML dynamique :

La date d'aujourd'hui est :

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

Exemples

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Essayez-le vous-même »

lamp N'utilisez jamais document.write() après que le document (DOM) a fini de charger. Cela écrasera le document.

Modification du contenu HTML

La façon la plus simple de modifier le contenu HTML est d'utiliser l'attribut innerHTML.

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

document.getElementById(id).innerHTML=nouveau HTML

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

Exemples

<html>
<body>

<p id="p1">Bonjour le monde !</p>

<script>
document.getElementById("p1").innerHTML="Nouveau texte !";
</script>

</body>
</html>

Essayez-le vous-même »

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

Exemples

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Ancien en-tête</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="Nouveau titre";
</script>

</body>
</html>

Essayez-le vous-même »

Explication de l'exemple :

  • Le document HTML ci-dessus contient un élément <h1> avec id="header"

  • Nous utilisons le DOM HTML pour obtenir l'élément avec id="header"

  • JavaScript modifie le contenu de cet élément (innerHTML)

Modification des attributs HTML

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

document.getElementById(id).attribute=new attribute value

Cet exemple modifie l'attribut src d'un élément <img> :

Exemples

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif.html">

<script>
document.getElementById("image").src="landscape.jpg.html";
</script>

</body>
</html>

Essayez-le vous-même »

Explication de l'exemple :

  • Le document HTML ci-dessus contient un élément <img> avec id="image"
  • Nous utilisons le DOM HTML pour obtenir l'élément avec id="image"
  • JavaScript modifie l'attribut de cet élément (remplace "smiley.gif" par "landscape.jpg")
Autres extensions