js中innerHTML,innerText,outerHTML的用法和區(qū)別

來(lái)看這個(gè)案例:

<div id="test"> <span style="color:red">test1</span> test2 </div>

?

innerHTML:

上例中的test.innerHTML的值也就是

<span style="color:red">test1</span> test2

也就是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽。


innerText:

上例中的text.innerTest的值也就是“test1 test2”, 其中span標(biāo)簽去除了。

從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽


outerHTML:

上例中的text.outerHTML的值也就是

<div id="test"><span style="color:red">test1</span> test2</div>

除了包含innerHTML的全部?jī)?nèi)容外, 還包含對(duì)象標(biāo)簽本身。


特別說(shuō)明:

innerHTML是符合W3C標(biāo)準(zhǔn)的屬性,而innerText只適用于IE瀏覽器,因此,盡可能地去使用innerHTML,而少用innerText,如果要輸出不含HTML標(biāo)簽的內(nèi)容,可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后,再用正則表達(dá)式去除HTML標(biāo)簽

下面是一個(gè)簡(jiǎn)單的符合W3C標(biāo)準(zhǔn)的示例:

var newtest = document.getElementById('test').innerHTML.replace(/<.+?>/gim,'');


抄一抄,總會(huì)有提高!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. dom對(duì)象的 innerText 和 innerHTML 有什么區(qū)別? 例子 test.innerHTML:...
    _fin閱讀 328評(píng)論 0 1
  • 1.簡(jiǎn)介 JavaScript 是腳本語(yǔ)言 JavaScript 是一種輕量級(jí)的編程語(yǔ)言。 JavaScript ...
    一只寫(xiě)程序的猿閱讀 724評(píng)論 0 3
  • 1.dom對(duì)象的innerText和innerHTML有什么區(qū)別? innerText 和 innerHTML都可...
    billa_8f6b閱讀 290評(píng)論 0 0
  • 參加完架構(gòu)師培訓(xùn)后,聽(tīng)楊老師在不同的場(chǎng)合多次強(qiáng)調(diào):建議同學(xué)們?nèi)陜?nèi)不發(fā)生生意往來(lái),后來(lái)改成了一年?;蛟S覺(jué)得三年實(shí)在...
    韌性十足的牛皮糖閱讀 213評(píng)論 0 2
  • 二叉樹(shù)的遍歷 前序遍歷 訪問(wèn)根結(jié)點(diǎn) 前序遍歷左子樹(shù) 前序遍歷右子樹(shù) 總結(jié):根左右 中序遍歷 中序遍歷左子樹(shù) 訪問(wèn)根...
    Cytosine閱讀 160評(píng)論 0 1

友情鏈接更多精彩內(nèi)容