innerText innerHTML outerText outerHTML的区别与联系

这四个属性在开发过程中经常困扰我，为此我特意查了一下资料并且做了一些总结。

一、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相同