Maison > interface Web > js tutoriel > le corps du texte

Comment modifier dynamiquement le contenu Div à l'aide de JavaScript ?

Patricia Arquette
Libérer: 2024-10-31 09:08:30
original
227 Les gens l'ont consulté

How to Dynamically Change Div Content Using JavaScript?

Modification dynamique du contenu Div à l'aide de JavaScript

La modification du contenu d'un élément div avec JavaScript peut être réalisée avec une approche intuitive. L'extrait de code HTML suivant sert d'exemple :

<code class="html"><html>
  <head>
    <script>
      function changeDivContent() { /* ... */ }
    </script>
  </head>
  <body>
    <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
    <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">
    <div id="content"></div>
  </body>
</html></code>
Copier après la connexion

Dans cet exemple, l'objectif est de modifier le contenu HTML interne de div#content en fonction de la sélection par l'utilisateur de boutons radio avec les valeurs "A" ou "B." Cependant, l'élément div ne dispose pas d'un attribut JavaScript « valeur » pour faciliter cette action.

Pour résoudre ce problème, JavaScript fournit une solution simple en utilisant la propriété innerHTML de l'élément HTML. En implémentant le code suivant :

<code class="js">document.getElementById("content").innerHTML = "whatever";</code>
Copier après la connexion

dans la fonction changeDivContent(), vous pouvez définir dynamiquement le contenu de div#content sur n'importe quelle valeur souhaitée. Cela vous permet de mettre à jour de manière transparente le contenu d'un élément div en fonction des entrées de l'utilisateur ou d'autres conditions dynamiques dans votre code JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À 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!