innerhtml用法 innertext用法以及innerHTML與innertext的區(qū)別

更新時(shí)間：2009年10月26日 17:57:40 作者：

innerhtml用法 innertext用法以及innerHTML與innertext的區(qū)別，看完這個(gè)大家以后在實(shí)際應(yīng)用中，就可以選擇合適的方法。盡可能的考慮到兼容性。

test.innerHTML:
　　也就是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽。
　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:
　　從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽
　　上例中的text.innerTest的值也就是“test1 test2”, 其中span標(biāo)簽去除了。
test.outerHTML:
　　除了包含innerHTML的全部?jī)?nèi)容外, 還包含對(duì)象標(biāo)簽本身。
　　上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例：

復(fù)制代碼代碼如下:

 
<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a href="javascript:alert(test.innerHTML)">innerHTML內(nèi)容</a> 
<a href="javascript:alert(test.innerText)">inerHTML內(nèi)容</a> 
<a href="javascript:alert(test.outerHTML)">outerHTML內(nèi)容</a> 

特別說明：
　　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>

復(fù)制代碼代碼如下:

 
<html> 
<head></head> 
<frameset frameborder="yes" frameborder="1" rows="40%,*"> 
<frame name="top" src="1.html"> 
<frame name="bottom" src="2.html"> 
</frameset> 
</html> 
<html> 
<head> 
<script language="javascript"> 
function init() 
{ 
var aaa = parent.window.frames[0].document.body.innerHTML; 
alert(aaa); 
} 
</script> 
</head> 
<body> 
<p align="center">nothing</p> 
<p align="center"><input type="button" onclick="init()"; value="click"></p> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
js中l(wèi)ess常用的方法小結(jié)
下面小編就為大家?guī)硪黄猨s中l(wèi)ess常用的方法小結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
javascript getElementsByClassName函數(shù)
今天在腳本中應(yīng)用到了根據(jù)類名取元素的方法，卻對(duì)其效率不甚滿意。于是，小幅修改了其探測(cè)元素類名的方法，提升了約3成的效率.
2010-04-04
JavaScript閉包詳解
這篇文章主要為大家介紹了JavaScript閉包，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
異步j(luò)avascript的原理和實(shí)現(xiàn)技巧介紹
因?yàn)楣ぷ鞯男枰?，我要在網(wǎng)頁(yè)端編寫一段腳本，把數(shù)據(jù)通過網(wǎng)頁(yè)批量提交到系統(tǒng)中去。所以我就想到了Greasemonkey插件，于是就開始動(dòng)手寫，發(fā)現(xiàn)問題解決得很順利
2012-11-11
注意 JavaScript 中 RegExp 對(duì)象的 test 方法
注意 JavaScript 中 RegExp 對(duì)象的 test 方法...
2007-01-01
使用JavaScript實(shí)現(xiàn)獲取audio時(shí)長(zhǎng)
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取audio時(shí)長(zhǎng),并且轉(zhuǎn)換為分鐘00:00:00格式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法
這篇文章主要介紹了JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以參考下
2015-03-03
微信小程序偽類選擇器的使用詳解
這篇文章主要介紹了微信小程序偽類選擇器的使用詳解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-06-06
原生js實(shí)現(xiàn)日期選擇插件
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05