innerHTML與innerText區別

最後更新：2017-08-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：屬性 style color chrome瀏覽器 blog inner 表達 hello htm

　　document 對象中有innerHTML和innerText 兩個屬性，這兩個屬性都是擷取document對象的常值內容的，這兩個屬性間有哪些區別呢？

樣本1（一層嵌套各瀏覽器輸出）

<html>      <head><title>innerHTML</title></head>      <body>          <p id="p1">hello world </p>          <script>              var content = document.getElementById("p1");              alert(content.innerHTML);              alert(content.innerText)          </script>      </body>  </html>

通過IE瀏覽器開啟，彈出內容為 "hello world" 和 "hello world"

通過 Firefox 瀏覽器開啟，彈出內容為 "hello world" 和 "undefined"

通過 chrome 瀏覽器開啟，彈出內容為 "hello world" 和 "hello world"

樣本2（多層嵌套各瀏覽器輸出）

<html>      <head><title>innerHTML</title></head>      <body>          <div id="d1"><p id="p1">hello world </p></div>          <script>              var content = document.getElementById("d1");              alert(content.innerHTML);              alert(content.innerText)          </script>      </body>  </html>

通過IE瀏覽器開啟，彈出內容為 hello world 和 hello world

通過 Firefox 瀏覽器開啟，彈出內容為 hello world 和 undefined

通過 chrome 瀏覽器開啟，彈出內容為 hello world 和 hello world

結論

通過上面兩個樣本，可以看出：

innerHTML指的是從對象的起始位置到終止位置的全部內容,包括Html標籤。
innerText 指的是從起始位置到終止位置的內容,但它去除Html標籤。
同時，innerHTML 是所有瀏覽器都支援的，innerText 是IE瀏覽器和chrome 瀏覽器支援的，Firefox瀏覽器不支援。其實，innerHTML 是W3C 組織規定的屬性；而innerText 屬性是IE瀏覽器自己的屬性，不過後來的瀏覽器部分實現這個屬性罷了。

outerHTML

　　說到innerHTML，順便說一下跟innerHTML相對的outerHTML 屬性。繼續看上面的代碼，將alert(content.innerText) 修改為 alert(content.outerHTML)

通過瀏覽器可以看到彈出框為hello world 和 <divid="d1">hello world</div>

outerHTML指的是除了包含innerHTML的全部內容外, 還包含對象標籤本

總結說明

　　innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器（現在也適應chrome瀏覽器），因此，儘可能地去使用 innerHTML，而少用innerText，如果要輸出不含HTML標籤的內容，可以使用innerHTML取得包含HTML標籤的內容後，再用Regex去除HTML標籤，下面是一個簡單的符合W3C標準的樣本：

<html>      <head><title>innerHTML</title></head>      <body>          <div id="d1"><p id="p1">hello world </p></div>          <script>              var content = document.getElementById("p1");              alert(content.innerHTML.replace(/&lt;.+?>/gim,‘‘));  //&lt;逸出字元 ‘<‘

</script> </body> </html>

彈出的為去掉了html標籤之後的內容，這是個在所有瀏覽器均可使用的相容方法。

參考：innerHTML與innerText區別

innerHTML與innerText區別

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More