innerHTML、outerHTML、innerText、outerText的區別

今天面試又看到這樣的題了，總結下供大家參考：


概念性問題
innerHTML 設定或擷取位於對象起始和結束標籤內的 HTML
outerHTML 設定或擷取對象及其內容的 HTML 形式
innerText 設定或擷取位於對象起始和結束標籤內的文本
outerText 設定(包括標籤)或擷取(不包括標籤)對象的文本


操作真想分析

<ul>   　　<li id="io">初期顯示</li>   </ul>

io.innerHTML="<i><u>設定或擷取位於對象起始和結束標籤內的 HTML.</u></i>";   (以下為執行後結果)

<ul>   　　<li id="io"><i><u>設定或擷取位於對象起始和結束標籤內的 HTML.</u></i></li>   </ul>

其中的<i><u>標籤將會被解析（頁面不會顯示<i><u>）

io.outerHTML="<i><u>設定或擷取對象及其內容的 HTML 形式.</u></i>";   (以下為執行後結果)

<ul>   　　<i><u>設定或擷取對象及其內容的 HTML 形式.</u></i>  </ul>

其中的<i><u>標籤將會被解析（頁面不會顯示<i><u>）

io.innerText="<i><u>設定或擷取位於對象起始和結束標籤內的文本.</u></i>";   (以下為執行後結果)

<ul>   　　<li id="io">"<i><u>設定或擷取位於對象起始和結束標籤內的文本.</u></i>"</li>   </ul>

其中的<i><u>標籤將不會被解析（頁面會顯示<i><u>）

io.outerText="<i><u>設定(包括標籤)或擷取(不包括標籤)對象的文本.</u></i>";(以下為執行後結果)

<ul>   　　"<i><u>設定(包括標籤)或擷取(不包括標籤)對象的文本.</u></i>"</ul>

其中的<i><u>標籤將不會被解析（頁面會顯示<i><u>）

以上使用不同點總結
innerHTML與outerHTML在設定對象的內容時包含的HTML會被解析，而innerText與outerText則不會。 
innerHTML與innerText僅設定標籤內的文本，而outerHTML與outerText設定包括標籤在內的文本。

注意：
innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器 。