HTML / Javascript changer le contenu div

208

J'ai du code HTML simple avec du javascript, ça ressemble à:

<html>

<head>
  <script type="text/javascript">
    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>

Développer l'extrait

Je voulais juste pouvoir changer le contenu du div (c'est du HTML interne) en sélectionnant l'un des boutons radio "A" ou "B", mais le contenu div # n'a pas d'attribut javascript "value", donc je demande comment il peut être terminé.

javascript html

— Rob
source

419

En supposant que vous n'utilisez pas jQuery ou une autre bibliothèque qui vous facilite la tâche, vous pouvez simplement utiliser la propriété innerHTML de l'élément.

document.getElementById("content").innerHTML = "whatever";

— Syntaxique
source

6

document.getElementById("content").innerText = "<b>bold text?</b>";Soit dit en passant , se comportera différemment, et parfois très utilement, pourdocument.getElementById("content").innerHTML = "<b>bold text?</b>";

— Isaac

24

Veuillez utiliser innerHTMLplutôt que innerTextet textContentcar innerHTMLest compatible avec tous les navigateurs.

— Minh Triet

10

Avertissement! l'utilisation de innerHTMLpeut facilement conduire à des vulnérabilités XSS lorsque la valeur provient d'une entrée non fiable. L'utilisation de innerTextest toujours recommandée pour des raisons de sécurité et est actuellement prise en charge par tous les navigateurs ( caniuse.com/#feat=innertext )

— Mirko Conti

puis-je assigner un autre élément div via innerHTML, quelque chose comme document.getElementById ("foo"). innerHTML = <div> ... </div>

— Fayaz

24

$('#content').html('whatever');

— Michael Sanchez
source

Merci d'avoir essayé d'utiliser replace_html mais cela a semblé résoudre mon problème. Une idée pourquoi?

— Tall Paul

Il s'agit de la solution jQuery.

— Ivo

14

Obtenez l'ID du divcontenu dont vous souhaitez modifier puis attribuez le texte comme ci-dessous:

  var myDiv = document.getElementById("divId");
  myDiv.innerHTML = "Content To Show";

— Daniel Mbeyah
source

2

Bienvenue sur Stackoverflow! Fournir un peu d'explication lorsque vous écrivez du code dans votre réponse est beaucoup plus utile que le simple code.

— George Netu

10

vous pouvez utiliser la fonction d'assistance suivante:

function content(divSelector, value) {
    document.querySelector(divSelector).innerHTML = value;
}

content('#content',"whatever");

Où #contentdoit être un sélecteur CSS valide

Voici un exemple de travail .

De plus - aujourd'hui (2018.07.01), j'ai fait une comparaison de vitesse pour les solutions jquery et pure js (MacOs High Sierra 10.13.3 sur Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 bits)):

document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever');                            // jQuery

La solution jquery était plus lente que la solution pure js: 69% sur firefox, 61% sur safari, 56% sur chrome. Le navigateur le plus rapide pour pure js était firefox avec 560 millions d'opérations par seconde, le second était safari 426 millions et le plus lent était le chrome 122 millions.

Les gagnants sont donc pur js et firefox (3x plus rapide que chrome!)

Vous pouvez le tester sur votre machine: https://jsperf.com/js-jquery-html-content-change

— Kamil Kiełczewski
source

2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="radio" name="radiobutton" value="A" onclick = "populateData(event)">
  <input type="radio" name="radiobutton" value="B" onclick = "populateData(event)">

    <div id="content"></div>
</body>
</html>

----------------- Code JS ------------

var targetDiv = document.getElementById('content');
    var htmlContent = '';

    function populateData(event){
      switch(event.target.value){
        case 'A':{
         htmlContent = 'Content for A';
          break;
        }
        case 'B':{
          htmlContent = "content for B";
break;
        }
      }
      targetDiv.innerHTML = htmlContent;
    }

Step1: on click of the radio button it calls function populate data, with event (an object that has event details such as name of the element, value etc..);

Step2: I extracted the value through event.target.value and then simple switch will give me freedom to add custom text.

Code en direct

https://jsbin.com/poreway/edit?html,js,output

— Clister Dmello
source

0

changer onCliquez sur onClick="changeDivContent(this)"et essayez

function changeDivContent(btn) {
  content.innerHTML = btn.value
}

Afficher l'extrait de code

function changeDivContent(btn) {
  content.innerHTML = btn.value
}

<input type="radio" name="radiobutton" value="A" onClick="changeDivContent(this)">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent(this)">

<div id="content"></div>

Développer l'extrait

— Kamil Kiełczewski
source