JavaScript DOM HTML change le contenu HTML
HTML DOM permet JavaScript pour modifier le contenu de l'élément HTML.
Modifier le 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 directement le contenu HTML dans le flux de sortie.
Exemples
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Essayez »
 | Ne jamais utiliser document.write après que le document a fini de charger (). Ceci remplace le document. |
|---|
Modifier le contenu HTML
Utilisation de la propriété innerHTML La meilleure façon de modifier le contenu HTML.
Pour modifier le contenu de l'élément HTML, utilisez cette syntaxe:
document.getElementById(id).innerHTML=新的 HTML
Cet exemple modifie le contenu de l'élément <p>:
Exemples
<Html>
<Body>
<P id = "p1"> Bonjour tout le monde! </ P>
<Script>
document.getElementById ( "p1") innerHTML = "nouveau texte !.";
</ Script>
</ Body>
</ Html>
<Body>
<P id = "p1"> Bonjour tout le monde! </ P>
<Script>
document.getElementById ( "p1") innerHTML = "nouveau texte !.";
</ Script>
</ Body>
</ Html>
Essayez »
Cet exemple modifie le contenu de la balise <h1> élément:
Exemples
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
Essayez »
Exemples d'expliquer:
- Le document HTML ci-dessus qui contient id = "header" de la balise <h1> élément
- Nous utilisons les DOM HTML pour obtenir l'id = élément "d'en-tête"
- JavaScript changements sur cet élément contenu (innerHTML)
Modifiez les attributs HTML
Pour modifier les propriétés d'un élément HTML, utilisez cette syntaxe:
document.getElementById(id).attribute=新属性值
Cet exemple modifie l'élément attribut src <img>:
Exemples
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
Essayez »
Exemples d'expliquer:
- Le document HTML ci-dessus qui contient id = "image" de l'élément <img>
- Nous utilisons les DOM HTML pour obtenir l'élément id = "image"
- JavaScript modifier les propriétés de cet élément (le «smiley.gif» à «landscape.jpg»)