innerHtml/outerHtml/innerText/outerText/textContent比较_综合

//HTML代码：

//执行获取操作的结果：

test.innerHTML的值:“test1 test2 ”

text.outerHTML的值: “<div id="test">test1 test2</div>“

text.innerText与text.outerText的值:“test1 test2”( 没有HTML标签)

text.textContent的值: “test1 test2”(没有HTML标签)

//原始HTML代码：

<ul>

</ul>

//执行设置操作结果

1）io.innerHTML="设置或获取位于对象起始和结束标签内的HTML."；结果如下

<ul>

<liid="io">设置或获取位于对象起始和结束标签内的HTML.</li>

</ul>//页面不会显示HTML标签

2）io.outerHTML="设置或获取对象及其内容的 HTML 形式.";结果如下

<ul>

设置或获取对象及其内容的HTML形式.

</ul> //页面不会显示HTML标签

4）io.innerText="设置或获取位于对象起始和结束标签内的文本."；结果如下

<ul>

<li id="io">"设置或获取位于对象起始和结束标签内的文本."</li>

</ul> //页面会显示HTML标签

5）io.outerText="设置(包括标签)或获取(不包括标签)对象的文本.";结果如下

<ul>

"设置(包括标签)或获取(不包括标签)对象的文本."

</ul> //页面会显示HTML标签

6）io.textContent="设置或获取位于对象起始和结束标签内的文本.",结果与io.innerText相同。

innerHTML是符合W3C标准的属性，所有主流浏览器几乎都支持；
outerHTML 最初是由 IE 浏览器实现的私有属性，W3C 的 HTML5 规范草案中也新加入了这个属性，目前，主流浏览器中，只有 Firefox 不支持 outerHTML属性。；
innerText 和outerText最初是由 IE4.0 浏览器实现的私有属性，现有 W3C 标准中的没有定义这个属性。虽然不是标准属性，但是大多浏览器都对它提供了支持，目前主流浏览器中只有 Firefox 不支持该属性。
textContent是DOM3级规定的一个属性，所以是符合W3C标准的属性。目前得到了FireFox、safari、opera和Chrome的支持，但IE不支持。虽然Firefox不支持innerText属性，但其可以用textContent属性代替。