Ik heb een eenvoudige HTML-code met een javascript, het lijkt erop:
<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>Antwoord 1, Autoriteit 100%
Aangenomen dat u geen jQuery of een andere bibliotheek gebruikt die dit soort ding voor u gemakkelijker maakt, kunt u gewoon het innerhtml-eigenschap van het element gebruiken.
document.getElementById("content").innerHTML = "whatever";
Antwoord 2, Autoriteit 5%
$('#content').html('whatever');
Antwoord 3, Autoriteit 3%
Download de ID van de divwaarvan u de inhoud wilt wijzigen, wijs de tekst toe zoals hieronder:
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
Antwoord 4, Autoriteit 3%
U kunt de volgende helperfunctie gebruiken:
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
Waar #contentgeldig moet zijn CSS kiezer
Hier is werkvoorbeeld.
Bovendien – vandaag (2018.07.01) heb ik snelheidsvergelijking gemaakt voor jQuery en pure js-oplossingen ( MacOs High Sierra 10.13.3 op 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
De jQuery-oplossing was langzamer dan de pure js-oplossing: 69% op Firefox, 61% op Safari, 56% op Chrome. De snelste browser voor pure js was Firefox met 560M bewerkingen per seconde, de tweede was Safari 426M en de langzaamste was Chrome 122M.
Dus de winnaars zijn pure js en firefox(3x sneller dan chrome!)
Je kunt het op je computer testen: https://jsperf.com/js- jquery-html-content-change
Antwoord 5
<!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>
————————–
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/pepeway/edit?html.js, output
Antwoord 6
Wijzig OnClick naar onClick="changeDivContent(this)"en probeer
function changeDivContent(btn) {
content.innerHTML = btn.value
}