我有一些带有 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”,所以我问它如何完成。
假设你没有使用 jQuery 或其他使此类事情更容易的库,你可以只使用元素的 innerHTML 属性。
document.getElementById("content").innerHTML = "whatever";
在旁注中,
document.getElementById("content").innerText = "<b>bold text?</b>";
行为会有所不同,有时非常有用,以document.getElementById("content").innerHTML = "<b>bold text?</b>";
请使用
innerHTML
而不是innerText
和textContent
因为innerHTML
兼容所有浏览器。警告!
innerHTML
当值来自不受信任的输入时,使用很容易导致 XSS 漏洞。innerText
出于安全原因,始终建议使用 ,并且目前所有浏览器都支持它 ( caniuse.com/#feat=innertext )我可以通过innerHTML分配其他div元素吗,比如document.getElementById("foo").innerHTML = <div>...</div>