快捷導(dǎo)航

innerText innerHTML的用法以及注意事項(xiàng) [推薦]

更新時(shí)間：2009年05月18日 00:32:49 作者：

我們常常需要使用另外一些對(duì)象的屬性來(lái)實(shí)現(xiàn)動(dòng)態(tài)改變其中的文本,它們就是：innerText，outerText，innerHTML，outerHTML，千萬(wàn)要注意它們的大小寫(xiě)，因?yàn)殄e(cuò)一點(diǎn)您就得不到預(yù)期的效果了。

一:動(dòng)態(tài)改變文本和Html

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

innerText屬性用來(lái)定義對(duì)象所要輸出的文本，在本例中innerText把對(duì)象DT中的文本“您好嗎?”變成了“我很好!”（語(yǔ)句DT.innerText="我很好!"）。而對(duì)對(duì)象DH的改變用了innerHTML屬性，它除了有innerText的作用外，還可改變對(duì)象DH內(nèi)部的HTML語(yǔ)句，于是它把文本變成了“我姓肖!”，而且文本輸出改成了斜體（<i></i>）并下加一條直線(xiàn)（<u></u>），即語(yǔ)句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類(lèi)似的作用，讀者不妨自己試試看。

二:文本的動(dòng)態(tài)輸入與輸出

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

此例的效果是先在文本框中輸入文本，然后按“輸出文本”的按鈕，接著網(wǎng)頁(yè)便會(huì)自動(dòng)輸出您所輸入的文本
三:注意innerHTML有自動(dòng)檢查語(yǔ)法的功能,它會(huì)把不完整的HTML代碼補(bǔ)充完整,這點(diǎn)可以說(shuō)是神奇,例如下面的這段腳本

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

運(yùn)行的效果竟然是這樣的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
如圖:

所以請(qǐng)各位在使用時(shí)一定要小心.
例如在做這樣的操作時(shí)就會(huì)出錯(cuò).

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

list.innerHTML="<table><tr>"; 
list.innerHTML+="<td>" 

必須用一個(gè)中間變量
Html代碼

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

var html="<table><tr>"; 
html+="<td>"; 
list.innerHTML=html; 
var html="<table><tr>"; 
html+="<td>"; 
list.innerHTML=html; 

這樣問(wèn)題就可以得到解決.
另外:
innerText在火狐下是不支持的，在網(wǎng)上有這種有人這么做
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>

您可能感興趣的文章: