詳談innerHTML innerText的使用和區(qū)別
document對象中有innerHTML、innerText這兩個屬性,都是獲取document對象文本內(nèi)容,但使用起來還是有區(qū)別的;
1) innerHTML設(shè)置或獲取標(biāo)簽所包含的HTML+文本信息(從標(biāo)簽起始位置到終止位置全部內(nèi)容,包括HTML標(biāo)簽,但不包括自身)
2) outerHTML設(shè)置或獲取標(biāo)簽自身及其所包含的HTML+文本信息(包括自身)
3) innerText設(shè)置或獲取標(biāo)簽所包含的文本信息(從標(biāo)簽起始位置到終止位置的內(nèi)容,去除HTML標(biāo)簽,但不包括自身)
4) outerText設(shè)置或獲取標(biāo)簽自身及其所包含的文本信息(包括自身)

innerText和outerText在獲取的時候是相同效果,但在設(shè)置時,innerText僅設(shè)置標(biāo)簽所包含的文本,而outerText設(shè)置包含包括標(biāo)簽自身在內(nèi)的文本。
示例代碼:
示例1:

通過IE瀏覽器打開,彈出內(nèi)容為"hello world"和"hello world"
通過Firefox瀏覽器打開,彈出內(nèi)容為"hello world"和"undefined"
通過chrome瀏覽器打開,彈出的內(nèi)容為"hello world"和"hello world"
alert(content.outerHTML)則彈出:"<p id="p1">hello world</p>"
示例2

通過IE瀏覽器打開,彈出內(nèi)容為"<p id="p1">hello world</p>"和"hello world"
通過Firefox瀏覽器打開,彈出內(nèi)容為"<p id="p1">hello world</p>"和"undefined"
通過chrome瀏覽器打開,彈出的內(nèi)容為"<p id="p1">hello world</p>"和"hello world"
alert(content.outerHTML)則彈出:"<div id="d1"><p id="p1">hello world</p></div>"
綜上:innerHTML所有瀏覽器都支持,innerText是IE瀏覽器支持的,F(xiàn)irefox瀏覽器不支持。
不同之處:
1) innerHTML、outerHTML在設(shè)置標(biāo)簽之間的內(nèi)容時,包含的HTML會被解析;而innerText、outerText則不會;
2) innerHTML、innerText僅設(shè)置標(biāo)簽之間的文本,而outerHTML、outerText設(shè)置包含自身標(biāo)簽在內(nèi)文本
以上這篇詳談innerHTML innerText的使用和區(qū)別就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript高級程序設(shè)計閱讀筆記(六) ECMAScript中的運算符(二)
ECMAScript中的運算符,學(xué)習(xí)js的朋友可以參考下2012-02-02
在Javascript里訪問SharePoint列表數(shù)據(jù)的實現(xiàn)方法
在進行SharePoint訂制的時候經(jīng)常會遇到開發(fā)手段受限制的問題,比如通常公司都會限制服務(wù)器的訪問以及部署,很多開發(fā)都只能夠在客戶端來進行2011-05-05
uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能實例
uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
利用select實現(xiàn)年月日三級聯(lián)動的日期選擇效果【推薦】
關(guān)于select控件,可能年月日三級聯(lián)動的日期選擇效果是最常見的應(yīng)用了。本文將對日期選擇效果進行詳細介紹。需要的朋友一起來看下吧2016-12-12
js限制input只能輸入有效的數(shù)字(第一個不能是小數(shù)點)
有時候我們需要限制input只能輸入有效的數(shù)字,有且只有一個小數(shù)點,第一個不能為小數(shù)點,那么就可以參考下面的函數(shù)來實現(xiàn)2018-09-09
淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯,需要的朋友可以過來參考一下2016-03-03
JavaScript實現(xiàn)算術(shù)平方根算法-代碼超簡單
實現(xiàn)算術(shù)平方根的方法有很多種,本文是通過JavaScript實現(xiàn)的算術(shù)平方根算法,代碼超簡單,超管用,感興趣的朋友跟著腳本之家的小編一起學(xué)習(xí)吧2015-09-09

