我有一些JavaScript的简单HTML代码，看起来像：
<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>我只是想能够通过选择“ A”或“ B”单选按钮之一来更改div的内容（它是内部html），但是div＃content没有javascript属性“ value”，所以我问它如何完成。
Answers:
假设您没有使用jQuery或其他使您更轻松地进行此类操作的库，则可以只使用元素的innerHTML属性。
document.getElementById("content").innerHTML = "whatever";innerHTML而不是innerText和，textContent因为innerHTML它与所有浏览器都兼容。
innerHTML当值来自不受信任的输入时，的使用很容易导致XSS漏洞。使用的innerText始终是出于安全考虑，目前它是由所有的浏览器（支持caniuse.com/#feat=innertext）
获取div要更改其内容的ID，然后分配文本，如下所示：
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
您可以使用以下帮助程序功能：
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
哪里#content必须是有效的CSS选择器
这是工作示例。
Additionaly-今天（2018.07.01）我对jquery和纯js解决方案进行了速度比较（Chrome 67.0.3396.99（64位）上的MacOs High Sierra 10.13.3，Safari 11.0.3（13604.5.6），Firefox 59.0.2 （64位））：
document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever'); // jQuery
jQuery解决方案比纯js解决方案慢：在firefox上为69％，在Safari中为61％，在chrome上为56％。纯js最快的浏览器是firefox，每秒可进行560M次操作，第二次是safari 426M，最慢的是chrome 122M。
因此，优胜者是纯js和Firefox（比chrome快3倍！）
您可以在机器上对其进行测试：https : //jsperf.com/js-jquery-html-content-change
<!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-代码------------
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.
现场代码
更改onClick onClick="changeDivContent(this)"并尝试
function changeDivContent(btn) {
content.innerHTML = btn.value
}
document.getElementById("content").innerText = "<b>bold text?</b>";会表现不同，有时相当有效，到document.getElementById("content").innerHTML = "<b>bold text?</b>";