recherche

Maison >interface Web >js tutoriel >Comment modifier dynamiquement le contenu Div à l'aide de JavaScript ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-31 09:08:30355parcourir

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>

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>

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!

JavaScript html using Attribute Property function this innerHTML input
Déclaration：
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
Article précédent：Comment vérifier efficacement les correspondances de sous-chaînes d’un tableau en JavaScript ?Article suivant：Comment vérifier efficacement les correspondances de sous-chaînes d’un tableau en JavaScript ?

Articles Liés

Voir plus