快捷導(dǎo)航

innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析

更新時(shí)間：2013年12月16日 09:51:56 作者：

本篇主要是對(duì)innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>這是一個(gè)層</span></div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
<script language="javascript">
function changeb(obj)
{
obj.outerHTML = "<input type='text' value='設(shè)置對(duì)象內(nèi)的HTML，包括標(biāo)簽' style='width:200px;'></input>"
}
function changea(obj)
{
obj.innerHTML = "<b>設(shè)置對(duì)象內(nèi)的HTML</b>"
}
</script>
<br><br>
innerHTML獲取標(biāo)簽內(nèi)的HTML<br>
outerHTML獲取標(biāo)簽及標(biāo)簽內(nèi)的HTML<br>
innerTEXT和outerTEXT都是獲取標(biāo)簽內(nèi)的文本，相同。<br>
<br><br>
<div id="div1" style="background-color:#ff9966;border:1px #ff0000 dashed;">這是一個(gè)層</div>
<br>
<input name="innerHTML1" value="innerHTML" type="button" OnClick="changea(div1)">
<input name="outerHTML1" value="outerHTML" type="button" OnClick="changeb(div1)">
<input name="innerText1" value="innerText" type="button" OnClick="div1.innerText='使用innerText替換文本'">
<input name="outerText1" value="outerText" type="button" OnClick="div1.outerText='使用outerText會(huì)連帶標(biāo)簽一起替換成目標(biāo)文本，層也替換掉了'">
<br>
<p>
innerHTML設(shè)置標(biāo)簽內(nèi)的HTML<br>
outerHTML設(shè)置標(biāo)簽及標(biāo)簽內(nèi)的HTML<br>
innerTEXT設(shè)置簽內(nèi)的文本<br>
innerTEXT設(shè)置簽內(nèi)的文本，包括標(biāo)簽一起替換。<br>
</p>

innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML <br>
outerHTML 設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式 <br>
innerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本 <br>
outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本 <br><br>

您可能感興趣的文章:

相關(guān)文章

小程序?qū)崿F(xiàn)多選框功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多選框功能，小程序?qū)崿F(xiàn)單選全選多選刪除操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
javascript中Promise使用詳解
這篇文章主要介紹了javascript中Promise使用詳解，關(guān)于Promise的使用相關(guān)的知識(shí)點(diǎn)下面文章內(nèi)容介紹詳細(xì)具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
JS前端開(kāi)發(fā)之exec()和match()的對(duì)比使用
match()方法可在字符串內(nèi)檢索指定的值,或找到一個(gè)或多個(gè)正則表達(dá)式的匹配,下面這篇文章主要給大家介紹了關(guān)于JS前端開(kāi)發(fā)之exec()和match()的對(duì)比使用的相關(guān)資料,需要的朋友可以參考下
2022-09-09
js css實(shí)現(xiàn)垂直方向自適應(yīng)的三角提示菜單
這篇文章主要為大家詳細(xì)介紹了js css實(shí)現(xiàn)垂直方向自適應(yīng)的三角提示菜單的相關(guān)資料,需要的朋友可以參考下
2016-06-06
JavaScript事件處理的方式(三種)
最近這段時(shí)間因?yàn)槊刻煲薷木W(wǎng)站，為網(wǎng)站做特效，所以看了很多的js接觸事件，自己只會(huì)使用一小部分，有時(shí)用的時(shí)候也比較混亂，現(xiàn)在系統(tǒng)的整理了一下，特此分享到腳本之家平臺(tái)供大家參考下
2016-04-04
jfreechart插件將數(shù)據(jù)展示成餅狀圖、柱狀圖和折線圖
閑暇之余，學(xué)習(xí)了一下jfreechart圖表生成，結(jié)合大蝦們的著作，小弟進(jìn)行了系統(tǒng)的總結(jié)，真是獲益匪淺，這里推薦給小伙伴們，有需要的朋友可以參考下。
2015-04-04
JS中的new Map()方法介紹
Map 是 JavaScript 中非常強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),它提供了比傳統(tǒng)對(duì)象更多的靈活性和功能,本文給大家介紹JS中的new Map()方法,感興趣的朋友一起看看吧
2025-04-04
JS實(shí)現(xiàn)的豎向折疊菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動(dòng)態(tài)遍歷頁(yè)面元素及樣式修改的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
給Javascript數(shù)組插入一條記錄的代碼
給Javascript數(shù)組插入一條記錄的代碼...
2007-08-08
ES6擴(kuò)展運(yùn)算符和rest運(yùn)算符用法實(shí)例分析
這篇文章主要介紹了ES6擴(kuò)展運(yùn)算符和rest運(yùn)算符用法,結(jié)合實(shí)例形式分析了ES6擴(kuò)展運(yùn)算符和rest運(yùn)算符基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05