Comment modifier dynamiquement le contenu Div à l'aide de JavaScript ?-js tutoriel-php.cn

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!