1. 程式人生 > >innerHTML,innerText,outerHTML

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的值是

“test1 test2”, 其中span標籤去除了。

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