HTML / Javascript cambia contenuto div

Question 1

Ho un semplice codice HTML con un po 'di javascript, sembra:

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

Espandi lo snippet

Volevo solo essere in grado di modificare il contenuto del div (è html interno) selezionando uno dei pulsanti di opzione "A" o "B", ma div # content non ha l'attributo javascript "value", quindi sto chiedendo come può essere fatto.

Question 2

Supponendo che tu non stia usando jQuery o qualche altra libreria che ti semplifica questo genere di cose, puoi semplicemente usare la proprietà innerHTML dell'elemento.

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

Question 3

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

Question 4

Ottieni l'ID del divcontenuto di cui desideri modificare, quindi assegna il testo come di seguito:

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

Question 5

puoi usare la seguente funzione di supporto:

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

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

Dove #contentdeve essere un selettore CSS valido

Ecco un esempio funzionante .

Inoltre - oggi (2018.07.01) ho confrontato la velocità per le soluzioni jquery e pure js (MacOs High Sierra 10.13.3 su Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 bit)):

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

La soluzione jquery era più lenta della soluzione js pura: 69% su firefox, 61% su safari, 56% su chrome. Il browser più veloce per js puro era Firefox con 560 milioni di operazioni al secondo, il secondo era safari 426M e il più lento era chrome 122M.

Quindi i vincitori sono pure js e firefox (3 volte più veloci di chrome!)

Puoi testarlo sulla tua macchina: https://jsperf.com/js-jquery-html-content-change

Question 6

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

----------------- Codice 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.

Codice live

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

Question 7

cambiare su Fare clic su onClick="changeDivContent(this)"e provare

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

Mostra snippet di codice

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>

Espandi lo snippet