innerHTML
获得：得到元素内部所有标签的内容和标签
设置：内容中包含了标签，标签是起作用
innerText
获得：得到元素内部的文本，没有标签
设置：内容中包含了标签，标签是不起作用的，以纯文本的方式显示
下面通过代码详细体验一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML和innerText</title>
</head>
<body>
<div id="myDiv">
<span>
<a href="#">我是链接</a>
</span>
</div>
<hr/>
<input type="button" id="b1" value="得到HTML"/>
<input type="button" id="b2" value="得到Text"/>
<input type="button" id="b3" value="设置HTML"/>
<input type="button" id="b4" value="设置Text"/>
<script type="text/javascript">
document.getElementById("b1").onclick = function () {
alert(document.getElementById("myDiv").innerHTML)
};
document.getElementById("b2").onclick = function () {
alert(document.getElementById("myDiv").innerText)
};
document.getElementById("b3").onclick = function () {
document.getElementById("myDiv").innerHTML = "<h2 style='color: red'>这是标题</h2>";
};
document.getElementById("b4").onclick = function () {
document.getElementById("myDiv").innerText = "<h2 style='color: red'>这是标题</h2>";
};
</script>
</body>
</html>
扫一扫
2292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
