Le code HTML DOM permet JavaScript pour modifier le contenu des éléments HTML.
Modification du flux HTML de sortie
JavaScript peut créer du contenu HTML dynamique:
Date:Sun 06 2016 19:23:35 nov GMT + 0800 (中国标准时间)
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>
Essayez - le vous - même » Ne jamais utiliser document.write() après que le document est chargé. Il remplace le document.
Modification du contenu HTML
La meilleure façon de modifier le contenu d'un élément HTML est en utilisant le 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>
Essayez - le vous - même » Cet exemple modifie le contenu d'un <h1> é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>
Essayez - le vous - même » Exemple expliqué:
- Le document HTML ci - dessus contient un <h1> élément avec id="header"
- Nous utilisons les DOM HTML pour obtenir l'élément avec id="header"
- Un JavaScript modifie le contenu (innerHTML) de cet élément
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>
Essayez - le vous - même » Exemple expliqué:
- Le document HTML ci - dessus contient un <img> élément avec id="myImage"
- Nous utilisons les DOM HTML pour obtenir l'élément avec id="myImage"
- Un JavaScript change la src attribut de cet élément de "smiley.gif" à "landscape.jpg"
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »