innerHtml/outerHtml/innerText/outerText/textContent比较

 总纲

• innerHTML 设置或获取位于对象起始和结束标签内的 HTML
• outerHTML 设置或获取对象及其内容的 HTML 形式
• textContent/innerText 设置或获取位于对象起始和结束标签内的文本
• outerText 设置(包括标签)或获取(不包括标签)对象的文本 

获取操作

//HTML代码：

<div id="test">
<span style="color:red">test1</span> test2
</div>

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

test.innerHTML的值:“<span style="color:red">test1</span> test2 ”

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

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

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

 设置操作

//原始HTML代码：

<ul>         

    <li id="io">初期显示</li>    

</ul> 

//执行设置操作结果

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

<ul>    

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

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

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

<ul>    

    <i><u>设置或获取对象及其内容的HTML形式.</u></i>   

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

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

<ul>    

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

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

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

<ul>    

    "<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>" 

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

6）io.textContent="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>",结果与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属性代替。