如何用JavaScript更改div内容?

我有简单的HTML代码和一些JavaScript。它看起来是这样的:

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

我只是想能够改变div的内容(它的内部html)与选择"A"或“;B"单选按钮，但div#内容没有javascript属性"值"，所以我问它是如何做到的。

771952 次浏览
小开
最佳答案

假设您没有使用jQuery或其他可以使这类事情变得更容易的库，您可以只使用元素的innerHTML属性。

document.getElementById("content").innerHTML = "whatever";
小开 
$('#content').html('whatever');
小开

获取你想要更改其内容的div的id，然后按如下方式分配文本:

  var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
小开 
<!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.

生活的代码

https://jsbin.com/poreway/edit?html,js,output

小开

你可以使用以下helper函数:

function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}


content('#content',"whatever");

其中#content必须是有效的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

enter image description here

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

小开

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


提交答案