innerHTML,innerText,outerHTML
<div id="test">
<span style="color:red">test1</span> test2
</div>
innerHTML
也就是從物件的起始位置到終止位置的全部內容,包括Html標籤。
上面程式碼中的test.innerHTML的值也就是“<span style="color:red">test1< /span> test2 ”
innerText:
從起始位置到終止位置的內容, 但它去除Html標籤
上例中的text.innerText的值是
outerHTML:
除了包含innerHTML的全部內容外, 還包含物件標籤本身。
上例中的text.outerHTML的值也就是<div id="test">< span style="color:red">test1</span> test2</div>
innerHTML是符合W3C標準的屬性,而innerText只適用於IE瀏覽器。因此,儘可能地去使 用innerHTML,而少用innerText。如果要輸出不含HTML標籤的內容,可以使用innerHTML取得包含HTML標籤的內容後,再用正則表示式去除HTML標籤
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>
FF不支援innerHTML
<span id="ad_1"></span> <SPAN id="ad_11" style="visibility:hidden;"> <script language="JavaScript" src="/js/ad_1.js"></script> </SPAN> <SCRIPT>ad_1.innerHTML=ad_11.innerHTML;ad_11.innerHTML="";</SCRIPT>
上面的程式碼在IE、chrome等瀏覽器下可以被正確的執行替換,而在Firefox下就不能。其實解決方法也很簡單,就讓我們按照ECMAScript規 範寫程式碼即可。上面的程式碼修正為下面的即可:
<span id="ad_1"></span> <SPAN id="ad_11" style="visibility:hidden;"> <script language="JavaScript" src="/js/ad_1.js"></script> </SPAN> <SCRIPT> document.getElementById("ad_1").innerHTML=document.getElementById("ad_11").innerHTML; document.getElementById("ad_11").innerHTML=""; </SCRIPT>
不要直接使用DIV或SPAN的id,而是通過 document.getElementById("div_id") 來執行替換即可。另外,Firefox是不支援 innerTEXT 屬性的。
但是,FF下有個textContent屬性。
但是實際上,這裡有個誤解。網上很多文章說“FF下等效於innerText屬性的屬性是textContent”——但是事實上並非如此。innerText與textContent有幾點很重要的不同,導致它們在一些情況下不能直接互換使用。
IE中的innerText是需要對innerHTML的值進行:
1、HTML轉義(等同於XML轉義,對<、&等轉義字元進行處理);
2、經過HTML解釋和CSS樣式解釋(<br/>會起作用,換行當作空格);
3、之後又剔除格式資訊 之後留下的純文字。
而FF中的textContent沒有2、3步,在經過了HTML轉義之後直接剔除所有html標籤後得到的純文字。
<div id=”T1″>
ABCD
EFG HIJ<br/>KLM N
OPQ<div>RS</div>T
T
<div>
在IE中的innerText屬性的值為:
ABCD
EFG HIJ
KLM N OPQ
RS
T T
而在FF中的textContent的屬性的值為:
(這裡有個換行)
ABCD
EFG HIJKLM N
OPQRST
T