innerText innerHTML的用法以及注意事項 [推薦]

2019-11-21 01:21:56

字體：大中小

來源：轉載

供稿：網友

一:動態改變文本和Html

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

二:文本的動態輸入與輸出

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

此例的效果是先在文本框中輸入文本，然后按“輸出文本”的按鈕，接著網頁便會自動輸出您所輸入的文本
三:注意innerHTML有自動檢查語法的功能,它會把不完整的HTML代碼補充完整,這點可以說是神奇,例如下面的這段腳本

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

運行的效果竟然是這樣的:
<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>

上一篇：jquery 圓角遮罩圖片實現圖片圓角

下一篇：innerText和innerHTML 一些問題分析