innerHTML、innerText、outerHTML、outerText的差別

書上是這樣說的：

innerHTML 設定或擷取位于對象起始和結束标簽内的 HTML

outerHTML 設定或擷取對象及其内容的 HTML 形式

innerText 設定或擷取位于對象起始和結束标簽内的文本

outerText 設定(包括标簽)或擷取(不包括标簽)對象的文本

沒有例子，你明白什麼意思嗎，反正我沒明白，下面我們舉例來說吧：

如：

原html為：

<div id="test"><span>替換前</span></div>

1.innerHTML

運作腳本：

<script type="text/javascript" lang="javascript">

document.getElementById('test').innerHTML = "<div>替換後</div>";

</script>      

原來的html變為：

<div id="test"><div>替換後</div></div>      

2.outerHTML

運作腳本：

<script type="text/javascript" lang="javascript">

document.getElementById('test').outerHTML = "<div>替換後</div>";

</script>      

原html變為：

<div>替換後</div>      

3.innerText

運作腳本：

<script type="text/javascript" lang="javascript">

document.getElementById('test').innerText= "<div>替換後</div>"; 

</script>      

原html變為：

<div id="test">>div<替換後>/div<</div>      

4.outerText

運作腳本：

<script type="text/javascript" lang="javascript">

document.getElementById('test').outerText= "<div>替換後</div>"; 

</script>      

原html變為：

>div<替換後>/div<      

不做實驗不會明白什麼意思，innerHTML和outHTML都是會将HTML标簽一起讀取或設定，但innerText和outerText在讀取的時候會去掉HTML标簽，設定的時候如果字元中包含HTML标簽，将會作為特殊字元做替換處理。這就是這幾個家夥的真正差別。