HTML/Javascript更改div内容
Rob*_*Rob 189 html javascript
我有简单的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"单选按钮之一,但股利#内容没有javascript属性"值",所以我问它如何完成.
Syn*_*tic 381
假如你不使用jQuery或使这种更容易为你的事情其他一些库,你可以使用元素的innerHTML属性.
document.getElementById("content").innerHTML = "whatever";
- 请使用`innerHTML`而不是`innerText`和`textContent`,因为`innerHTML`与所有浏览器兼容. (23认同)
- 另外,`document.getElementById("content").innerText ="<b>粗体文本？</ b>";`对于`document.getElementById("content")的行为方式有所不同,有时甚至非常有用.innerHTML ="<b>粗体文字？</ b>";` (5认同)
- **警告！**如果值来自不受信任的输入，则使用`innerHTML`很容易导致XSS漏洞。出于安全原因，始终建议使用“ innerText”，并且目前所有浏览器都支持使用“ innerText”（https://caniuse.com/#feat=innertext） (4认同)
小智 21
$('#content').html('whatever');
- 这是 jQuery 解决方案。 (6认同)
小智 11
获取div要更改其内容的ID,然后分配如下文本:
var myDiv = document.getElementById("divId");
myDiv.innerHTML = "Content To Show";
- 欢迎来到Stackoverflow!在答案中编写代码时提供一些解释远比代码更有帮助. (2认同)
你可以使用以下辅助函数:
function content(divSelector, value) {
document.querySelector(divSelector).innerHTML = value;
}
content('#content',"whatever");
哪里#content必须是有效的CSS选择器
这是一个有效的例子.
Additionaly - 今天(2018.07.01)我对jquery和纯js解决方案进行了速度比较(MacO 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
| 归档时间： |
|
| 查看次数： |
506895 次 |
| 最近记录： |