DOM中的outerHTML,innerHTML,outerText,innerText的区别

--转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。



特别说明：
　　 innerHTML是符合W3C标准的属性 ，而 innerText、outerText、outerHTML 只适用于 IE浏览器 ，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javas<wbr style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">cript:alert(document.getElementById('test').innerHTML.replace(/&lt;.+?&gt;/gim,''))"&gt;无HTML,符合W3C标准&lt;/a&gt;</span><br style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><br style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><em>详细出处参考：http://jhxk.javaeye.com/blog/353309</em></span><br style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><br style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">代码练习：</span><span style="font-size:12px; line-height:23px; font-family:Arial,Helvetica,simsun,u5b8bu4f53; text-align:left; color:rgb(128,0,128)"><strong>(ie生效，ff中只有innerHTML是对的)</strong></span><br style="line-height:25px; color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(68,68,68); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left"></span><pre name="code" class="html">&lt;script type="text/javascript"&gt; function getinnerHTML() { var e=window.document.getElementById("testdiv"); alert(e.innerHTML); //&lt;p&gt;白云&lt;/p&gt; } function getouterHTML() { var e=window.document.getElementById("testdiv"); alert(e.outerHTML); //&lt;div id="testdiv"&gt;&lt;p&gt;白云&lt;/p&gt;&lt;/div&gt; } function getinnerText() { var e=window.document.getElementById("testdiv"); alert(e.innerText); //白云 } function getouterText() { var e=window.document.getElementById("testdiv"); alert(e.outerText); //白云 } &lt;/script&gt; &lt;div id="testdiv"&gt;&lt;p&gt;白云&lt;/p&gt;&lt;/div&gt; &lt;p&gt; &lt;input type="button" name="Submit2" value="innerHTML" onClick="getinnerHTML()"&gt; &lt;input type="button" name="Submit" value="outerHTML" onClick="getouterHTML()"&gt; &lt;input type="button" name="Submit2" value="innerHTML" onClick="getinnerText() "&gt; &lt;input type="button" name="Submit2" value="innerHTML" onClick="getouterText()"&gt; &lt;/p&gt;</pre> <br></wbr>