innerText innerHTML的用法以及注意事項 [推薦]
更新時間:2009年05月18日 00:32:49 作者:
我們常常需要使用另外一些對象的屬性來實現(xiàn)動態(tài)改變其中的文本,它們就是:innerText,outerText,innerHTML,outerHTML,千萬要注意它們的大小寫,因為錯一點您就得不到預期的效果了。
一:動態(tài)改變文本和Html
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
innerText屬性用來定義對象所要輸出的文本,在本例中innerText把對象DT中的文本“您好嗎?”變成了“我很好!”(語句DT.innerText="我很好!")。而對對象DH的改變用了innerHTML屬性,它除了有innerText的作用外,還可改變對象DH內部的HTML語句,于是它把文本變成了“我姓肖!”,而且文本輸出改成了斜體(<i></i>)并下加一條直線(<u></u>),即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類似的作用,讀者不妨自己試試看。
二:文本的動態(tài)輸入與輸出
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
此例的效果是先在文本框中輸入文本,然后按“輸出文本”的按鈕,接著網頁便會自動輸出您所輸入的文本
三:注意innerHTML有自動檢查語法的功能,它會把不完整的HTML代碼補充完整,這點可以說是神奇,例如下面的這段腳本
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
運行的效果竟然是這樣的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
如圖:

所以請各位在使用時一定要小心.
例如在做這樣的操作時就會出錯.
list.innerHTML="<table><tr>";
list.innerHTML+="<td>"
必須用一個中間變量
Html代碼
var html="<table><tr>";
html+="<td>";
list.innerHTML=html;
var html="<table><tr>";
html+="<td>";
list.innerHTML=html;
這樣問題就可以得到解決.
另外:
innerText在火狐下是不支持的,在網上有這種有人這么做
innerHTML是符合W3C標準的屬性,而innerText只適用于IE瀏覽器,因此,盡可能地去使用 innerHTML,而少用innerText,如果要輸出不含HTML標簽的內容,可以使用innerHTML取得包含HTML標簽的內容后,再用正則表達式去除HTML標簽,下面是一個簡單的符合W3C標準的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
innerText屬性用來定義對象所要輸出的文本,在本例中innerText把對象DT中的文本“您好嗎?”變成了“我很好!”(語句DT.innerText="我很好!")。而對對象DH的改變用了innerHTML屬性,它除了有innerText的作用外,還可改變對象DH內部的HTML語句,于是它把文本變成了“我姓肖!”,而且文本輸出改成了斜體(<i></i>)并下加一條直線(<u></u>),即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類似的作用,讀者不妨自己試試看。
二:文本的動態(tài)輸入與輸出
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
此例的效果是先在文本框中輸入文本,然后按“輸出文本”的按鈕,接著網頁便會自動輸出您所輸入的文本
三:注意innerHTML有自動檢查語法的功能,它會把不完整的HTML代碼補充完整,這點可以說是神奇,例如下面的這段腳本
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
運行的效果竟然是這樣的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
如圖:

所以請各位在使用時一定要小心.
例如在做這樣的操作時就會出錯.
復制代碼 代碼如下:
list.innerHTML="<table><tr>";
list.innerHTML+="<td>"
必須用一個中間變量
Html代碼
復制代碼 代碼如下:
var html="<table><tr>";
html+="<td>";
list.innerHTML=html;
var html="<table><tr>";
html+="<td>";
list.innerHTML=html;
這樣問題就可以得到解決.
另外:
innerText在火狐下是不支持的,在網上有這種有人這么做
innerHTML是符合W3C標準的屬性,而innerText只適用于IE瀏覽器,因此,盡可能地去使用 innerHTML,而少用innerText,如果要輸出不含HTML標簽的內容,可以使用innerHTML取得包含HTML標簽的內容后,再用正則表達式去除HTML標簽,下面是一個簡單的符合W3C標準的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>
相關文章
微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
這篇文章主要介紹了微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01[js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例
下面小編就為大家?guī)硪黄猍js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08