innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
<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è)置對象內(nèi)的HTML，包括標(biāo)簽' style='width:200px;'></input>"
}
function changea(obj)
{
obj.innerHTML = "<b>設(shè)置對象內(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會連帶標(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è)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML <br>
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式 <br>
innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本 <br>
outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本 <br><br>
相關(guān)文章
js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲
本文主要介紹了js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲的實(shí)例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
下面小編就為大家?guī)硪黄猨s 判斷各種數(shù)據(jù)類型的簡單方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
在js里用到數(shù)組,比如 多個(gè)名字相同的input, 若是動態(tài)生成的, 提交時(shí)就需要判斷其是否是數(shù)組.2008-12-12
這篇文章利用圖片講解的方式向大家解釋了JavaScript中的this關(guān)鍵字，JavaScript this 到底指向什么？從這篇文章中大家可以得到想要的答案，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了ES6之模版字符串的具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
google地圖的路線實(shí)現(xiàn)代碼，大家可以參考下，實(shí)現(xiàn)自己想要的功能。2009-08-08
js實(shí)現(xiàn)黑色簡易的滑動門網(wǎng)頁tab選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)黑色簡易的滑動門網(wǎng)頁tab選項(xiàng)卡效果,可實(shí)現(xiàn)簡單的鼠標(biāo)滑過tab項(xiàng)切換對應(yīng)菜單的功能,涉及javascript鼠標(biāo)事件控制頁面元素的遍歷與樣式改變實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多圖和單圖上傳顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript繼承方式實(shí)例，需要的朋友可以參考下。2010-10-10
這篇文章主要介紹了javascript讀取本地文件和目錄方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08