InnerHTML和InnerText在处理转义字符(< >)上的一些差别？
InnerHTML和InnerText在处理转义字符上的一些差别？
以下是html网页的源代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试eval函数和测试eval函数是否安全</title>
<link rel="stylesheet" type="text/css" href="css/body.css">
<link rel="stylesheet" type="text/css" href="css/mark.css">
<link rel="stylesheet" type="text/css" href="css/console.css">
<script type="text/javascript" src="js/console.js"></script>
</head>
<body>
<h1>测试eval函数和测试eval函数是否安全</h1>
<div id="testInnerHTMLAndInnerText">
哈©喽，<a href="#">我是一个超链接</a>我喜欢赚钱！<br>
你们← 喜>欢赚钱吗？<b>我<也喜欢>赚钱</b>
<hr>
<input onclick="myTestInnerHTMLAndInnerText()" type="button" value="测试innerHTML和innerText这2个函数的区别">
</div>
<script type="text/javascript">
//alert("江西省赣州市于都县");
function myTestInnerHTMLAndInnerText() {
var testMyDivNode = document.getElementById("testInnerHTMLAndInnerText");
alert("innerHTML = " + testMyDivNode.innerHTML);
alert("innerText = " + testMyDivNode.innerText);
console.log("innerHTML = " + testMyDivNode.innerHTML);
console.log("innerText = " + testMyDivNode.innerText);
}
</script>
</body>
</html>
大家看下面的截图：当我点击按钮时，控制台会打印出如下图的信息。
innerText是把大于号小于号直接显示出来了，所以打印的是，喜>欢赚钱吗？我<也喜欢>赚钱
而innerHTML是把大于号小于号的转义字符直接显示出来了，所以打印的是,喜>欢赚钱吗？<b>我<也喜欢>赚钱</b>
这是我测试(用火狐浏览器测试的)得出的结论！