HTML / Javascript mengubah konten div

208

Saya memiliki kode HTML sederhana dengan beberapa javascript, sepertinya:

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

Saya hanya ingin dapat mengubah konten div (ini html dalam) dengan memilih salah satu dari tombol radio "A" atau "B", tetapi konten div # tidak memiliki atribut "nilai" atribut javascript, jadi saya bertanya bagaimana caranya dilakukan.

javascript html rampok
sumber

Jawaban:

419

Dengan asumsi Anda tidak menggunakan jQuery atau pustaka lain yang membuat hal semacam ini lebih mudah bagi Anda, Anda bisa menggunakan properti innerHTML elemen.

document.getElementById("content").innerHTML = "whatever";
Sintaksis
sumber
6
Di samping catatan, document.getElementById("content").innerText = "<b>bold text?</b>";akan berperilaku berbeda, dan kadang-kadang cukup bermanfaat, untukdocument.getElementById("content").innerHTML = "<b>bold text?</b>";
Isaac
24
Silakan gunakan innerHTMLdaripada innerTextdan textContentkarena innerHTMLkompatibel untuk semua browser.
Minh Triet
10
Peringatan! penggunaan innerHTMLXSS dapat dengan mudah menyebabkan kerentanan ketika nilainya berasal dari input yang tidak dipercaya. Penggunaan innerTextselalu disarankan untuk alasan keamanan dan saat ini didukung oleh semua browser ( caniuse.com/#feat=innertext )
Mirko Conti
dapatkah saya menetapkan elemen div lainnya melalui innerHTML, sesuatu seperti document.getElementById ("foo"). innerHTML = <div> ... </div>
Fayaz
24 
$('#content').html('whatever');
Michael Sanchez
sumber
Terima kasih untuk ini mencoba menggunakan replace_html tapi ini sepertinya memperbaiki masalah saya. Ada yang tahu kenapa?
Tall Paul
Ini adalah solusi jQuery.
Ivo
14

Dapatkan id divkonten yang ingin Anda ubah lalu berikan teks seperti di bawah ini: 

  var myDiv = document.getElementById("divId");
  myDiv.innerHTML = "Content To Show";
Daniel Mbeyah
sumber
2
Selamat datang di Stackoverflow! Memberikan sedikit penjelasan ketika Anda menulis kode dalam jawaban Anda jauh lebih bermanfaat daripada hanya kode.
George Netu
10

Anda dapat menggunakan fungsi pembantu berikut:

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

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

Di mana #contentharus pemilih CSS yang valid

Berikut ini contoh kerjanya .

Additionaly - hari ini (2018.07.01) Saya membuat perbandingan kecepatan untuk solusi jquery dan pure js (MacOs High Sierra 10.13.3 di 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

masukkan deskripsi gambar di sini

Solusi jquery lebih lambat daripada solusi js murni: 69% pada firefox, 61% pada safari, 56% pada chrome. Browser tercepat untuk js murni adalah firefox dengan operasi 560M per detik, yang kedua adalah safari 426M, dan paling lambat chrome 122M.

Jadi pemenangnya adalah js dan firefox murni (3x lebih cepat dari chrome!)

Anda dapat mengujinya di mesin Anda: https://jsperf.com/js-jquery-html-content-change

Kamil Kiełczewski
sumber
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>

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

Kode Langsung

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

Clister Dmello
sumber
0

ubah onClick to onClick="changeDivContent(this)"dan coba

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

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber