innerText,innerHTML,outerText,outerHTML 的最新解释

从网上找了很多的innerText,innerHTML,outerText,outerHTML的例子,都好像没怎么说清楚对outerText和innerText的区别,在这里,我将上面4个方法详细介绍一下

HTML:<DIV ALIGN="left" id="div"><p>hello world!!!</p>ddddd</DIV>

这个我们又要分两种情况了,第一种读取的时候 和第二种设置的时候

第一种读取的时候

div.innerText 取得:hello world!!!  ddddd
div.innerHTML 取得:<p>hello world!!!</p>ddddd
div.outerText 取得:hello world!!!  ddddd  (注:此结果与innerText相同,一般来说是这样子的)
div.outerHTML 取得:<DIV ALIGN="left" id="div"><p>hello world!!!</p>ddddd</DIV>

第二种设置的时候
div.innerText = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>不做HTML解析 页面直接显示为<p>abcdef</p>

div.innerHTML = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>会做HTML解析 页面只显示abcdef

div.outerText = "<p>abcdef</p>";
结果为:
<p>abcdef</p> 
此是对<p></p>不做HTML解析 将以前的对象标签给替换掉了,
这个时候是操纵是div本身  页面直接显示为<p>abcdef</p>

div.outerHTML = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>会做HTML解析
这个时候是操纵也是div本身
页面只显示abcdef


最后,outerText和innerText在取得数据的时候没有区别,而在设置值的时候就有区别
请记住inner操纵的是对象里面的东西
outer操纵的是对象本身,也就是要比inner大一级吧,
我是这样子理解的啊!
这4个方法的使用就到这里吧!