木子屋 Dnawo's BLOG

innerText和innerHTML区别

👤 dnawo 📅 2006-12-01 👁 5981 👍 0 💬 0 🔄 来源:网络
两者的主要区别是innerHTML 属性不自动对进出 HTML 实体的特殊字符进行编码,innerText 属性自动对进出 HTML 实体的特殊字符进行编码.

例如:

如果 innerHTML 属性设置为 "<b> Hello </b>",则 < 和 > 字符不会分别转换为 & lt; 和 & gt;.呈现的输出仍将是:<b> Hello </b>.浏览器将检测 <b> 标记并用粗体显示“Hello”文本.
如果 innerText 属性设置为 "<b> Hello </b>",则 < 和 > 符号分别转换为 & lt; 和 & gt;.呈现的输出将是:& lt; b & gt; Hello & lt; /b & gt;.& lt; 和 & gt; 实体将向浏览器指示这些字符将显示在页上.浏览器将不检测 <b> 标记并用粗体显示该文本.显示在页上的文本是:<b> Hello </b>.

下边是两个例子:

HTML
<script language="javascript">
function msg1(){
var msg;
msg = document.getElementById("div1").innerHTML;
msg += "\n";
msg += document.getElementById("div1").innerText;
alert(msg);
}
</script>
<div id="div1"><b>11111111111</b></div>
<input type="button" name="Submit" value="点击查看效果" onClick="msg1();">


HTML
<script language="javascript">
function msg1(){
var msg;
msg = "<b>11111111111</b>";
document.getElementById("div1").innerHTML = msg;
document.getElementById("div2").innerText = msg;
}
</script>
<div id="div1">123</div>
<div id="div2">456</div>
<input type="button" name="Submit" value="点击查看效果" onClick="msg1();">

评论(0)

暂无评论。

验证码
评论需审核通过后显示
← 上一篇 document 和 document.all 分别什么时候用 下一篇 → Javascript、VBscript和C#中使用正则表达式