innerHTML、innerText、outerHTML、outerText区别

1、区别：

（1） innerHTML 设置或获取位于对象起始和结束标签内的 HTML，例子：

hello world

BEI
JING

执行console.log(document.getElementById('div1').innerHTML);输出：hello world
执行console.log(document.getElementById('div2').innerHTML);输出：BEI

JING

执行document.getElementById('div1').innerHTML=‘qingdao’会设置div1中的内容为：qingdao
执行document.getElementById('div1').innerHTML='

'+'qingdao'+'

',此时页面显示的内容依旧是qingdao,标签名会自动解析，不会输出。     

（2）outerHTML 设置或获取对象及其内容的 HTML 形式，例子：

执行console.log(document.getElementById('div1').outerHTML);输出：

hello world

执行console.log(document.getElementById('div2').outerHTML);输出：

BEI

JING

与innerHTML不同的是，对象本身的标签也包含进去了。在设置outerHTML时，和innerHTML一样

（3）innerText 设置或获取位于对象起始和结束标签内的文本，例子：

执行console.log(document.getElementById('div1').innerText);输出：hello world
执行console.log(document.getElementById('div2').innerText);输出：
BEI
JING
注意到区别了吗，输出div2中的内容时，标签是不包含在内的。在设置innerText时，执行：
document.getElementById('div1').innerText='

'+'qingdao'+'

';此时页面显示的内容是

qingdao

，此时标签名没有被解析，当作字符原样输出

（4）outerText 设置(包括标签)或获取(不包括标签)对象的文本

执行console.log(document.getElementById('div1').outerText);输出：hello world
执行console.log(document.getElementById('div2').outerText);输出：
BEI
JING
不过，设置outerText的值时，可以解析标签名。

2、示例代码：

  
  
  
  
  
       
　　   
　　   
　　
   
　　
innerHTML效果.
   
　　
innerText效果.
   
　　
outerHTML效果.
   
　　
outerText效果.
   
　　
   
　　   
　　  

3、不同之处:　 
   简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于： 
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。 
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 
    对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：