JavaScript innerHTML 與 innerText 的差異

JavaScript 的 innerHTML 與 innerText 看似類似，但其實有很大的差異，對大多數設計師來說 innerHTML 應該比較熟悉，他是用來取得 HTML 元素或寫入字串到 HTML 網頁的語法，且 innerHTML 是 W3C 規定的標準寫法，而 innerText 則是除了可以用來取得 HTML 元素之外，還會把元素的 HTML 標籤去除掉，但 innerText 並非 W3C 所規定的標準寫法，而且僅適用於 IE 瀏覽器，這點非常重要。

JavaScript innerHTML 與 innerText 基本語法
HTMLDOMObject.innerText、HTMLDOMObject.innerText
兩者的基本語法原則上非常類似，差別在於運作後的結果。

JavaScript innerHTML 與 innerText 範例
<script type="text/javascript">
function ChangeFontColor(){
    var OriginalFont_1=document.getElementById("StringFont_1").innerHTML;
    var OriginalFont_2=document.getElementById("StringFont_2").innerText;
    document.getElementById("StringFont_1").innerHTML='<font color="blue">'+OriginalFont_1+'</font>';
    document.getElementById("StringFont_2").innerHTML=OriginalFont_2;
}
</script>
<p id="StringFont_1">透過 innerHTML 將文字變為藍色</p>
<p id="StringFont_2"><font color='blue'>透過 innerText 將文字變為黑色</font></p>
<input type="button" value="變更文字顏色" onclick="ChangeFontColor()">

範例第一個字串預設為黑色，透過 innerHTML 將包含 HTML font 文字顏色修改的標籤寫入原本的位置，將字串修改為藍色，第二個字串原本是藍色，透過 innerText 取得原始自串後，重新寫回原本的位置，由於原本控制文字為藍色的 HTML 標籤『<font color='blue'>』與『</font>』被過濾掉了，所以重新寫入的文字就變成黑色的。請注意，第二個字串顏色修改必須使用 IE 瀏覽器才會有效果，使用其他瀏覽器將會顯示 undefined，此範例呈現為 innerHTML 與 innerText 的主要差異。