javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
1、功能講解:
innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
outerHTML 設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式
innerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本
outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本
2、示例
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋體";color="blue";font-size="9pt"}
--> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本.</u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>
3、不同之處:
簡(jiǎn)單的說(shuō)innerHTML和outerHTML、innerText與outerText的不同之處在于：
1）、innerHTML與outerHTML在設(shè)置對(duì)象的內(nèi)容時(shí)包含的HTML會(huì)被解析，而innerText與outerText則不會(huì)。
2)、在設(shè)置時(shí)，innerHTML與innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標(biāo)簽在內(nèi)的文本。
特別說(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)的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無(wú)HTML,符合W3C標(biāo)準(zhǔn)</a>
- javascript innerText和innerHtml應(yīng)用
- JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
- javascript中innerText和innerHTML屬性用法實(shí)例分析
- js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別
- JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除
- 快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題
- 離開(kāi)頁(yè)面時(shí)檢測(cè)表單元素是否被修改,提示保存的js代碼
- js 獲取元素在頁(yè)面上的偏移量的方法匯總
- JavaScript獲取頁(yè)面上某個(gè)元素的代碼
- js使用文檔就緒函數(shù)動(dòng)態(tài)改變頁(yè)面內(nèi)容示例【innerHTML、innerText】
相關(guān)文章
作為前端程序員,TS已經(jīng)成為一項(xiàng)必不可少的技能,本文旨在介紹 TS中的一些實(shí)用技巧,提高大家對(duì)這門語(yǔ)言更深的認(rèn)知,這篇文章主要給大家介紹了關(guān)于typescript實(shí)用小技巧的相關(guān)資料,需要的朋友可以參考下2021-08-08
JavaScript 處理樹(shù)數(shù)據(jù)結(jié)構(gòu)的方法示例
這篇文章主要介紹了JavaScript 處理樹(shù)數(shù)據(jù)結(jié)構(gòu)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
JavaScript打開(kāi)word文檔的實(shí)現(xiàn)代碼(c#)
在C#中打開(kāi)word文檔其實(shí)不算太難，方法也比較多,用javascript怎么打開(kāi)呢？其實(shí)，也不難2012-04-04
js document.getElementsByClassName的使用介紹與自定義函數(shù)
今天在增加一個(gè)功能的時(shí)候需要用到getElementsByClassName()，getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持，那么就需要下面的方法解決了2016-11-11
在傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計(jì)中，主要關(guān)注于公用和私有作用域。公用作用域中的對(duì)象屬性可以從對(duì)象外部訪問(wèn)，即開(kāi)發(fā)者創(chuàng)建對(duì)象的實(shí)例后，就可使用它的公用屬性。2009-08-08
JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實(shí)現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了刷新父窗口兩種方法,需要的朋友可以參考下2014-05-05
JavaScript定時(shí)器和優(yōu)化的取消定時(shí)器方法
這篇文章主要介紹了JavaScript定時(shí)器和優(yōu)化的取消定時(shí)器方法,本文著重講解一個(gè)優(yōu)化的取消定時(shí)器的方法,需要的朋友可以參考下2015-07-07
打造通用的勻速運(yùn)動(dòng)框架(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇打造通用的勻速運(yùn)動(dòng)框架(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10