詳談innerHTML innerText的使用和區(qū)別
document對(duì)象中有innerHTML、innerText這兩個(gè)屬性,都是獲取document對(duì)象文本內(nèi)容,但使用起來(lái)還是有區(qū)別的;
1) innerHTML設(shè)置或獲取標(biāo)簽所包含的HTML+文本信息(從標(biāo)簽起始位置到終止位置全部?jī)?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í)候是相同效果,但在設(shè)置時(shí),innerText僅設(shè)置標(biāo)簽所包含的文本,而outerText設(shè)置包含包括標(biāo)簽自身在內(nèi)的文本。
示例代碼:
示例1:

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

通過(guò)IE瀏覽器打開(kāi),彈出內(nèi)容為"<p id="p1">hello world</p>"和"hello world"
通過(guò)Firefox瀏覽器打開(kāi),彈出內(nèi)容為"<p id="p1">hello world</p>"和"undefined"
通過(guò)chrome瀏覽器打開(kāi),彈出的內(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)容時(shí),包含的HTML會(huì)被解析;而innerText、outerText則不會(huì);
2) innerHTML、innerText僅設(shè)置標(biāo)簽之間的文本,而outerHTML、outerText設(shè)置包含自身標(biāo)簽在內(nèi)文本
以上這篇詳談innerHTML innerText的使用和區(qū)別就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- javascript innerText和innerHtml應(yīng)用
- innerText innerHTML的用法以及注意事項(xiàng) [推薦]
- innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
- innerText和innerHTML 一些問(wèn)題分析
- JavaScript中innerHTML,innerText,outerHTML的用法及區(qū)別
- js中textContent、innerText和innerHTML的用法以及區(qū)別
- innerHTML,outerHTML,innerTEXT三者之間的區(qū)別
- 前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)
相關(guān)文章
前端接入AI接口的常見(jiàn)問(wèn)題與優(yōu)化避坑指南
在前端技術(shù)快速發(fā)展的今天,HTML5接入AI接口的常見(jiàn)問(wèn)題與優(yōu)化已經(jīng)成為每個(gè)前端開(kāi)發(fā)者必須掌握的核心技能,下面小編就和大家詳細(xì)介紹一下前端接入AI接口的常見(jiàn)問(wèn)題和優(yōu)化技巧吧2026-04-04
js簡(jiǎn)單實(shí)現(xiàn)刪除記錄時(shí)的提示效果
刪除記錄時(shí)的提示效果,挺人性化的,實(shí)現(xiàn)的方法有很多,在本文為大家介紹下使用js是如何實(shí)現(xiàn)的2013-12-12
layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例
下面小編就為大家?guī)?lái)一篇layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
用javascript實(shí)現(xiàn)讀取txt文檔的腳本
用javascript實(shí)現(xiàn)讀取txt文檔的腳本...2007-07-07
使用snowfall.jquery.js實(shí)現(xiàn)愛(ài)心滿(mǎn)屏飛的效果
這篇文章主要介紹了使用snowfall.jquery.js實(shí)現(xiàn)愛(ài)心滿(mǎn)屏飛的效果的相關(guān)資料,需要的朋友可以參考下2017-01-01

