我有简单的HTML代码和一些JavaScript。它看起来是这样的:
< html > < >头 <脚本type = " text / javascript”> function changeDivContent(){//… }; > < /脚本 > < /头 身体< > <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()" > <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()" > < div id = "内容" > < / div > < /身体> < / html >
我只是想能够改变div的内容(它的内部html)与选择“A”或“B”单选按钮之一，但div#内容没有javascript属性“值”，所以我问它可以怎么做。
当前回答
假设您没有使用jQuery或其他可以使这类事情变得更容易的库，您可以只使用元素的innerHTML属性。
document.getElementById("content").innerHTML = "whatever";
其他回答
获取你想要更改内容的div的id，然后按如下方式分配文本:
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
假设您没有使用jQuery或其他可以使这类事情变得更容易的库，您可以只使用元素的innerHTML属性。
document.getElementById("content").innerHTML = "whatever";
将onClick更改为onClick="changeDivContent(this)"并尝试
function changeDivContent(btn) {
content.innerHTML = btn.value
}
函数更改DivContent（btn） { content.innerHTML = btn.value } <输入类型=“单选”名称=“单选按钮”值=“A” onClick=“changeDivContent（this）”> <输入类型=“单选” 名称=“单选按钮” 值=“B” onClick=“changeDivContent（this）”> <div id=“content”></div>
使用jQuery:
$('#content').html('whatever');
你可以使用以下helper函数:
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
哪里#内容必须是有效的CSS选择器
下面是一个实际的例子。
另外-今天(2018.07.01)我对jquery和纯js解决方案(MacOs High Sierra 10.13.3在Chrome 67.0.3396.99(64位)，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
