HTML/Javascript 更改 div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2554149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/Javascript change div content
提问by Rob
I have simple HTML code with some javascript, it looks like:
我有一些带有 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>I just wanted to be able to change the div's content (it's inner html) with selecting one of "A" or "B" radio buttons, but div#content does not have javascript attribute "value", so I am asking how it can be done.
我只是希望能够通过选择“A”或“B”单选按钮之一来更改 div 的内容（它是内部 html），但是 div#content 没有 javascript 属性“value”，所以我问它如何完成。
回答by Syntactic
Assuming you're not using jQuery or some other library that makes this sort of thing easier for you, you can just use the element's innerHTML property.
假设您没有使用 jQuery 或其他使此类事情更容易的库，您可以只使用元素的 innerHTML 属性。
document.getElementById("content").innerHTML = "whatever";
回答by Michael Sanchez
$('#content').html('whatever');
回答by Daniel Mbeyah
Get the id of the divwhose content you want to change then assign the text as below:
获取div要更改其内容的 id，然后按如下方式分配文本：
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
回答by Kamil Kie?czewski
you can use following helper function:
您可以使用以下辅助功能：
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
Where #contentmust be valid CSS selector
哪里#content必须是有效的CSS 选择器
Here is working example.
这是工作示例。
Additionaly - today (2018.07.01) I made speed comparison for jquery and pure js solutions ( MacOs High Sierra 10.13.3 on Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit) ):
另外 - 今天（2018.07.01）我对jquery和纯js解决方案（MacOs High Sierra 10.13.3 on 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
The jquery solution was slower than pure js solution: 69% on firefox, 61% on safari, 56% on chrome. The fastest browser for pure js was firefox with 560M operations per second, the second was safari 426M, and slowest was chrome 122M.
jquery 解决方案比纯 js 解决方案慢：firefox 69%，safari 61%，chrome 56%。纯js浏览器最快的是firefox，每秒560M操作，第二是safari 426M，最慢的是chrome 122M。
So the winners are pure js and firefox(3x faster than chrome!)
所以赢家是纯js和firefox（比chrome快3倍！）
You can test it in your machine: https://jsperf.com/js-jquery-html-content-change
您可以在您的机器上进行测试：https: //jsperf.com/js-jquery-html-content-change
回答by Clister Dmello
<!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------------
-----------------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.
Live Code
实时代码
回答by Kamil Kie?czewski
change onClick to onClick="changeDivContent(this)"and try
将 onClick 更改为onClick="changeDivContent(this)"并尝试
function changeDivContent(btn) {
content.innerHTML = btn.value
}
function changeDivContent(btn) {
content.innerHTML = btn.value
}<input type="radio" name="radiobutton" value="A" onClick="changeDivContent(this)">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent(this)">
<div id="content"></div>