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
la source

Réponses:

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

entrez la description de l'image ici

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
la 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
la source
0

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

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

Afficher l'extrait de code

Kamil Kiełczewski
la source