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