HTML/Javascript ändern div Inhalt

117

ich mit einigen javascript einfachen HTML-Code habe, sieht es so aus:HTML/Javascript ändern div Inhalt

<html> 

<head><script type="text/javascript">...</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>

Ich wollte nur in der Lage ändern div Inhalt sein (es ist innere html) mit einem „A“ Auswahl oder "B" Radio-Buttons, aber Div # Inhalt hat Javascript Attribut "Wert", also frage ich, wie es gemacht werden kann.

Quelle

2010-03-31 Rob

277

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

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

Quelle

2010-03-31 15:19:52 Syntactic

Auf einer Seite zur Kenntnis, 'document.getElementById ("content"). Innertext =" fett gedruckten Text? ";' wird sich anders verhalten, und manchmal sehr nützlich, um 'document.getElementById ("content"). InnerHTML = "Fettschrift? ";' – Isaac

+18

Bitte verwenden Sie 'innerHTML' anstelle von' innerText' und 'textContent', da' innerHTML' kompatibel zu allen Browsern ist. –

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

Quelle

2015-04-15 20:47:25

Danke, dass Sie replace_html verwenden wollten, aber das schien mein Problem zu lösen. –

+13

Verwendung von jQuery ... 5 Jahre zu spät, erklären nichts und verwenden nicht erforderliche Technologie, ohne es anzuzeigen ... Immer noch: 13 upvotes.Ich verstehe nicht SO – jabujavi

Erhalten Sie die ID des div, deren Inhalt Sie den Text wie unten weisen Sie dann ändern:

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

Quelle

2016-01-07 13:47:37

Willkommen bei Stackoverflow! Bereitstellung ein wenig Erklärung, wenn Sie Code in Ihrem schreiben Antwort ist weitaus hilfreicher als nur der Code. –

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

Quelle

2017-11-16 22:40:34

HTML/Javascript ändern div Inhalt

Antwort

Verwandte Themen