HTML / JavaScript zmieniają zawartość div

208

Mam prosty kod HTML z jakimś javascript, wygląda to tak:

<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>
Rozwiń fragment kodu

Chciałem tylko móc zmienić zawartość div (jej wewnętrzny HTML) poprzez wybranie jednego z przycisków radiowych „A” lub „B”, ale treść div # nie ma atrybutu „javascript”, więc pytam, jak to zrobić będzie zrobione.

javascript html Obrabować
źródło

Odpowiedzi:

418

Zakładając, że nie używasz jQuery lub innej biblioteki, która ułatwia ci to, możesz po prostu użyć właściwości innerHTML elementu.

document.getElementById("content").innerHTML = "whatever";
Syntaktyczny
źródło
6
Na marginesie, document.getElementById("content").innerText = "<b>bold text?</b>";będzie zachowywać się inaczej, a czasem całkiem pożytecznie, dodocument.getElementById("content").innerHTML = "<b>bold text?</b>";
Isaac
24
Proszę używać innerHTMLzamiast innerTexti textContentponieważ innerHTMLjest kompatybilny ze wszystkimi przeglądarkami.
Minh Triet
10
Ostrzeżenie! użycie innerHTMLmoże łatwo doprowadzić do podatności na błędy XSS, gdy wartość pochodzi z niezaufanego wejścia. Korzystanie z innerTextjest zawsze zalecane ze względów bezpieczeństwa i obecnie jest obsługiwane przez wszystkie przeglądarki ( caniuse.com/#feat=innertext )
Mirko Conti
mogę przypisać inny element div poprzez innerHTML, coś jak document.getElementById ( "foo") innerHTML = <div> ... </ div>.
Fayaz
24 
$('#content').html('whatever');
Michael Sanchez
źródło
Dzięki za to próbowałem użyć replace_html, ale to wydawało się rozwiązać mój problem. Masz pomysł, dlaczego?
Tall Paul
To jest rozwiązanie jQuery.
Ivo,
14

Uzyskaj identyfikator divtreści, którą chcesz zmienić, a następnie przypisz tekst w następujący sposób: 

  var myDiv = document.getElementById("divId");
  myDiv.innerHTML = "Content To Show";
Daniel Mbeyah
źródło
2
Witamy w Stackoverflow! Podanie trochę wyjaśnienia podczas pisania kodu w odpowiedzi jest znacznie bardziej pomocne niż tylko kod.
George Netu,
10

możesz użyć następującej funkcji pomocnika:

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

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

Gdzie #contentmusi być prawidłowy selektor CSS

Oto działający przykład .

Dodatkowo - dzisiaj (2018.07.01) Dokonałem porównania prędkości dla rozwiązań jquery i pure js (MacOs High Sierra 10.13.3 na 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

wprowadź opis zdjęcia tutaj

Rozwiązanie jquery było wolniejsze niż rozwiązanie czysto js: 69% na Firefox, 61% na Safari, 56% na Chrome. Najszybszą przeglądarką dla czystego jsa był Firefox z 560 mln operacji na sekundę, drugą była Safari 426 mln, a najwolniejsza Chrome 122 mln.

Zwycięzcami są więc js i firefox (3 razy szybszy niż chrome!)

Możesz to przetestować na swoim komputerze: https://jsperf.com/js-jquery-html-content-change

Kamil Kiełczewski
źródło
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- kod ------------

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.

Kod na żywo

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

Clister Dmello
źródło
0

zmień na Kliknij onClick="changeDivContent(this)"i spróbuj

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

Pokaż fragment kodu

Kamil Kiełczewski
źródło