javascript 的 innerText 與 textContent

現今的網路世界有多種瀏覽器：Microsoft 出版的 Internet Explorer（ie），自由軟體組織出版的 Firefox（ff），蘋果電腦出版的 Safari，還有 Google 也出版了 chrome 瀏覽器。雖然 javascript 有一個標準組織在維護其標準，可是廠商在發展瀏覽器時都有一些差異，因此在撰寫 javascript 程式時必須考量這些不同。

此處要談的就是 javascript 在處理物件的內文時，其屬性名稱在 ie 是用 innerText，在 ff 是用 textContent，而 safari 及 chrome 可以使用 innerText 與 textContent。如下表：

屬性名稱	ie 8	ff 3.0.1	Safari 3.1.2	chrome 0.2.149.30
innerText	可用	未定義	可用	可用
textContent	未定義	可用	可用	可用
民國九十七年十月二十七日，用 Win/XP 測試。

所以撰寫程式時必須先作檢查，然後使用正確的屬性名稱。下面這段簡單的程式就可以讓你的 javascript 在不同的瀏覽器上正確執行。
<div id='text'> </div> <script type='text/javascript'> var s='Hello world'; var obj=document.getElementById('text'); if(obj.textContent != undefined) obj.textContent=s; else obj.innerText=s; </script>

執行結果：

程式說明

指令	說明
<div id='text'> </div>	宣告一個 DIV 區塊，其 識別名 為 text。
<script type='text/javascript'> </script>	宣告 javascript 區塊。
var s='Hello world';	宣告變數 s，內存 Hello world。
var obj= document.getElementById( 'text');	宣告變數 obj，使用 getElementById 取得識別名為 text 的 div 區塊的物件指標，存入 obj 中。
if(obj.textContent != undefined) obj.textContent=s; else obj.innerText=s;;	檢查瀏覽器的 textContent 是否為 undefined。依據檢查結果將變數 s 存入物件的內文屬性中。