【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

HTML標籤的 innerText 與 textContent

假設有一個標籤內容如下:

<p id="msg" ></p>

如果要撰寫 JavaScript 存取其中的純文字內容,需要以下的程式碼:

var text = document.getElementById('msg').textContent ; 
document.getElementById('msg').textContent = 'xxx' ; 

而除了 textContent ,另外也可以引用 innerText 如下:

var text = document.getElementById('msg').innerText  ; 
document.getElementById('msg').innerText = 'xxx' ; 

不過要特別注意的是,在 IE 與 Chrome 瀏覽器下,這兩種方式都沒問題,但是 innerText 不是標準,Firefox 並不支援,如果你在Firefox 瀏覽器檢視,innerText 並不會有任何作用,因此建議一律使用 textContent 以避免跨瀏覽器的問題。

》相關閱讀
======================================================

3 則留言:

匿名 提到...

如果要更改標籤內的顯示值
是否也可以用以下方式呢?

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml

我個人常用的方法就是使用「.innerHTML」這個屬性(當然,也是要搭配 getElementById() 使用)

不知道 innerHTML 跟上述的兩種
(innerText 與 textContent)
有何差異呢?想請教一下~

匿名 提到...

不好意思~剛剛似乎有點混淆了
現在有點明白差異處了

我找了兩個例子

例1:http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_textcontent

例2:http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_textcontent2

各位網友們,可將這兩個例子的
「x.innerHTML=lst.textContent;」改為「x.innerHTML=lst.innerHTML;」
重新 "Submit Code" 一次,然後檢視看看
就明白差異處了,這兩個例子測試出來的效果略有不同哦~

^_^

康廷數位文教網 提到...

innerHTML 主要會將標籤內的所有任容回傳,包含子標籤,而 textContent 則只回傳純文字的內容 ... :D