Javascript HTML

JavaScript HTML DOM - Modification du HTML

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 :

La date d'aujourd'hui est : mercredi 26 octobre 2016 10:01:53 GMT+0800 (heure standard de la Chine)

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

N'utilisez jamais document.write() une fois le chargement du document terminé. Cela écrasera le document.

Modification du contenu HTML

Le moyen le 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=new HTML

Cet exemple modifie <h1> ; content :

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>

Exemple d'explication :

Le document HTML ci-dessus contient l'élément <h1> avec id="header"
Nous utilisons HTML DOM pour obtenir l'élément id="header "
JavaScript modifie le contenu de cet élément (innerHTML)

modifie les attributs HTML

Pour modifier les attributs des éléments HTML, veuillez utiliser cette syntaxe :

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

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

Le document HTML ci-dessus contient l'élément <img> avec id="image"

Nous utilisons HTML DOM pour obtenir l'élément avec id="image"

JavaScript Modifiez les attributs de cet élément (remplacez "../style/images/smiley.gif" par "../style/images/landscape.jpg")

Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script> <p>以上段落通过脚本修改文本。</p> </body> </html>
soumettreRéinitialiser le code
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!