HTML / Javascript div içeriğini değiştir

208

Bazı javascript ile basit HTML kodu var, gibi görünüyor:

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

Snippet'i genişlet

Ben sadece "A" veya "B" radyo düğmelerinden birini seçerek div içeriğini (iç html) değiştirmek istedim, ama div # içerik javascript özniteliği "değer" yok, bu yüzden nasıl olabilir soruyorum yapıldı.

javascript html

— soymak
kaynak

418

Bu tür şeyleri sizin için kolaylaştıran jQuery veya başka bir kütüphane kullanmadığınızı varsayarsak, öğenin innerHTML özelliğini kullanabilirsiniz.

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

— Sözdizimsel
kaynak

6

Bir yan notta, document.getElementById("content").innerText = "<b>bold text?</b>";farklı davranacak ve bazen oldukça yararlı olacakdocument.getElementById("content").innerHTML = "<b>bold text?</b>";

— Isaac

24

Kullanın innerHTMLziyade innerTextve textContentçünkü innerHTMLtüm tarayıcılara uyumludur.

— Minh Triet

10

Uyarı! innerHTMLdeğeri güvenilir olmayan bir girdiden geldiğinde , kullanımı XSS güvenlik açıklarına neden olabilir. Kullanımı innerTexther zaman güvenlik nedeniyle tavsiye edilir ve şu anda tüm tarayıcılar (tarafından desteklenen caniuse.com/#feat=innertext )

— Mirko Conti

innerHTML aracılığıyla, document.getElementById ("foo") gibi başka bir div öğesi atayabilir miyim. innerHTML = <div> ... </div>

— Fayaz

24

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

— Michael Sanchez
kaynak

Bunun için teşekkürler replace_html kullanmaya çalışıyordu ama bu sorunumu düzeltmek gibi görünüyordu. Neden olduğu hakkında bir fikrin var mı?

— Uzun Paul

Bu jQuery çözümüdür.

— Ivo

14

divİçeriğini değiştirmek istediğiniz kimliğini alın ve metni aşağıdaki gibi atayın:

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

— Daniel Mbeyah
kaynak

2

Stackoverflow'a hoş geldiniz! Cevabınıza kod yazarken biraz açıklama yapmak sadece koddan çok daha yararlıdır.

— George Netu

10

aşağıdaki yardımcı işlevi kullanabilirsiniz:

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

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

#contentGeçerli CSS seçici nerede olmalıdır?

İşte çalışan örnek .

Ayrıca - bugün (2018.07.01) Jquery ve saf js çözümleri (Chrome 67.0.3396.99 (64 bit) üzerinde MacOs High Sierra 10.13.3, Safari 11.0.3 (13604.5.6), Firefox 59.0.2 için hız karşılaştırması yaptım (64 bit)):

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

Jquery çözümü saf js çözeltisinden daha yavaştı: firefox'ta% 69, safari'de% 61, kromda% 56. Saf js için en hızlı tarayıcı saniyede 560M işlemlerle firefox, ikincisi safari 426M ve en yavaş krom 122M idi.

Kazananlar saf js ve firefox (kromdan 3 kat daha hızlı!)

Makinenizde test edebilirsiniz: https://jsperf.com/js-jquery-html-content-change

— Kamil Kiełczewski
kaynak

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>

----------------- JS- kodu ------------

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.

Canlı Kod

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

— Clister Dmello
kaynak

0

üzerine tıklayın onClick="changeDivContent(this)"ve deneyin

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

Kod snippet'ini göster

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>

Snippet'i genişlet

— Kamil Kiełczewski
kaynak