outerHTML、innerHTML和innerText的区别

最近突然发现对这个三个东西混淆了，重点整理和理解一下，希望能帮助同样没有理解到位的同学

啥话不说了，先上例子，从demo上理解才是真的能体会到真谛。

标签：  <div id = “id”> <p> abcdefg </p> </div>   

两层标签组成

首先这个三个标签都是很底层的属性，那就分别开始说明。

（1）OuterHTML返回了整个匹配的标签对象的内容。

例如：document.getElementById(“id”).outerHTML  返回的内容为 <div id = “id”> <p> abcdefg </p>  </div>   即，所匹配的标签对象的标签所有内容。   

（2）innerHMTL返回的是匹配的标签对象中的标签和其文本 

例如：document.getElementById(“id”).innerHTML 返回内容为 <p> abcdefg </p>

即 匹配的div标签中的所有的标签内容和文本内容

（3）InnerText 返回的是匹配的标签对象中的文本内容

例如：document.getElementById(“id”).innerText 返回内容为 abcdefg  即，只有文本内容。   图解如下：

干货来了

代码测试：

 

下面是在chrome中的结果，可以清晰的看到三者的区别

好了，相信大家也对这三个属性有所了解了，解释不对的，还望大神批评指正。

声明：原创博客，转载请注明地址