HTML / Javascript ändern div Inhalt

208

Ich habe einfachen HTML-Code mit etwas Javascript, es sieht so aus:

<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>
Erweitern Sie das Snippet

Ich wollte nur in der Lage sein, den Inhalt des Div (es ist inneres HTML) zu ändern, indem ich eines der Optionsfelder "A" oder "B" auswähle, aber der Inhalt von div # hat kein Javascript-Attribut "value", also frage ich, wie es geht getan werden.

javascript html rauben
quelle

Antworten:

418

Angenommen, Sie verwenden nicht jQuery oder eine andere Bibliothek, die Ihnen dies erleichtert, können Sie einfach die innerHTML-Eigenschaft des Elements verwenden.

document.getElementById("content").innerHTML = "whatever";
Syntaktisch
quelle
6
document.getElementById("content").innerText = "<b>bold text?</b>";document.getElementById("content").innerHTML = "<b>bold text?</b>";
Isaac
24
Bitte verwenden Sie innerHTMLanstatt innerTextund textContentweil innerHTMList mit allen Browsern kompatibel.
Minh Triet
10
Warnung! Die Verwendung von innerHTMLkann leicht zu XSS-Schwachstellen führen, wenn der Wert von einer nicht vertrauenswürdigen Eingabe stammt. Die Verwendung von innerTextwird aus Sicherheitsgründen immer empfohlen und wird derzeit von allen Browsern unterstützt ( caniuse.com/#feat=innertext )
Mirko Conti
Kann ich über innerHTML ein anderes div-Element zuweisen, so etwas wie document.getElementById ("foo"). innerHTML = <div> ... </ div>
Fayaz
24 
$('#content').html('whatever');
Michael Sanchez
quelle
Vielen Dank, dass Sie versucht haben, replace_html zu verwenden, aber dies schien mein Problem zu beheben. Irgendeine Idee warum?
Tall Paul
Dies ist eine jQuery-Lösung.
Ivo
14

Rufen Sie die ID des divInhalts ab, dessen Inhalt Sie ändern möchten, und weisen Sie den folgenden Text zu: 

  var myDiv = document.getElementById("divId");
  myDiv.innerHTML = "Content To Show";
Daniel Mbeyah
quelle
2
Willkommen bei Stackoverflow! Es ist weitaus hilfreicher, ein wenig Erklärung zu geben, wenn Sie Code in Ihre Antwort schreiben, als nur den Code.
George Netu
10

Sie können folgende Hilfsfunktion verwenden:

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

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

Wo #contentmuss ein gültiger CSS-Selektor sein ?

Hier ist ein Arbeitsbeispiel .

Zusätzlich - heute (2018.07.01) habe ich einen Geschwindigkeitsvergleich für jquery- und reine js-Lösungen durchgeführt (MacOs High Sierra 10.13.3 auf 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

Geben Sie hier die Bildbeschreibung ein

Die jquery-Lösung war langsamer als die reine js-Lösung: 69% auf Firefox, 61% auf Safari, 56% auf Chrom. Der schnellste Browser für reine JS war Firefox mit 560 Millionen Operationen pro Sekunde, der zweite war Safari 426 Millionen und der langsamste war Chrome 122 Millionen.

Die Gewinner sind also reine Js und Firefox (3x schneller als Chrom!)

Sie können es auf Ihrem Computer testen: https://jsperf.com/js-jquery-html-content-change

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

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.

Live-Code

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

Clister Dmello
quelle
0

onClick to onClick="changeDivContent(this)"und versuche es

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

Code-Snippet anzeigen

Kamil Kiełczewski
quelle