1. Home
  2. JavaScript DOM HTML change le contenu HTML

Le meilleur didacticiel JavaScript DOM HTML change le contenu HTML en 2024, dans ce didacticiel, vous pouvez apprendre Modifier le flux de sortie HTML,Exemples,Modifier le contenu HTML,Exemples,Exemples,Modifiez les attributs HTML,Exemples,

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:Mon Sep 27 2021 15:30:42 GMT+0800 (中国标准时间)

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>

Essayez »

lampe 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>

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>

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>

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»)

Hot Didacticiel

Nous contacter

JavaScript DOM HTML change le contenu HTML
10/30