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 cript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標准</a> 

詳細出處參考：http://jhxk.javaeye.com/blog/353309

代碼練習： (ie生效，ff中只有innerHTML是對的)

<script   type="text/javascript">      
function   getinnerHTML()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.innerHTML);      //<p>白雲</p>
}      
function   getouterHTML()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.outerHTML);      //<div id="testdiv"><p>白雲</p></div>
}  
function   getinnerText()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.innerText);      //白雲
} 
function   getouterText()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.outerText);      //白雲
}     
</script>      

<div id="testdiv"><p>白雲</p></div>
<p>      
    <input   type="button"   name="Submit2"   value="innerHTML"   onClick="getinnerHTML()">      
    <input   type="button"   name="Submit"     value="outerHTML"   onClick="getouterHTML()"> 
    <input   type="button"   name="Submit2"   value="innerHTML"   onClick="getinnerText() ">      
    <input   type="button"   name="Submit2"   value="innerHTML"   onClick="getouterText()">           
</p>