这四个属性在开发过程中经常困扰我,为此我特意查了一下资料并且做了一些总结。
一、innerText与innerHTML的区别和联系
1、显示问题:
若是纯文本例如:<div id="content">Hello word!</div>
则alert(document.getElementById("content").innerText)与alert(document.getElementById("content").innerHTML)返回的值是相同的
若是有html元素存在html代码则不同:
<div id="content">
<p>this is my first name</p>
<ul>
<li>li1</li>
<li>li2</li>
</ul>
</div>
alert(document.getElementById("content").innerText) 返回的应该是this is my first name li1 li2 由于不同的浏览器处理空白符的方式不同,因此输出的文本可能也不会跟原始的代码中的缩进相同。
alert(document.getElementById("content").innerHTML) 返回的则是
<p>this is my first name</p>
<ul>
<li>li1</li>
<li>li2</li>
</ul>
2、设置值问题:
纯文本的设置值问题:document.getElementById("content").innerText=“hello world !"与document.getElementById("content").innerHTML产生的效果是相同的
如果存在html代码问题:document.getElementById("content").innerText="hello & welcome,<b>\"reader\"!s</b>"; 设置以后运行html展示的是hello & welcome,<b>\"reader\"!s</b>";
而document.getElementById("content").innerHTML 设置后运行html展示的是hello & welcome,"reader"!s 出现此现象的原因是在有html代码的时候innerHTML会解析他们
二、innerText与outerText的区别与联系
1、在读取信息的时候,outerText与innerText完全一致,但是在写入信息的时候就完全不同,outerText不只是会替换调用它的元素的子节点,而是会替换整个元素(包括子节点),
例如:div.outerText="Hello";这行代码实际相当于如下俩行代码:
var text=document.createTextNode("Hello");
div.parentNode.replaceChild(text,div);//这个地方是替换掉了原来的div'节点
三、 innerHTML与outerHTML 的区别与联系与innerText与outerText的区别与联系相同
四、outerText与outerHtml的区别与联系与innerText和innerHTML相同