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 將文字變為藍色

透過 innerText 將文字變為黑色

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

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C