1. 程式人生 > >InnerHtml() 與html( )的區別

InnerHtml() 與html( )的區別

在一個 HTML 文件中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素,那麼只有第一個匹配元素的 HTML 內容會被獲取。

innerHTML 是從物件的起始位置到終止位置的全部內容,包括Html標籤

我原本一直以為innerHTML和jquery裡的html其實是完全一樣的,jquery是多此一舉了,直到我遇到一次問題

看個示例:

複製程式碼 程式碼如下:


var tbody=document.createElement('tbody'); 
tbody.innerHTML='<tr><td>IE下tbody的innerHTML是隻讀的</td></tr>'; //在IE下報錯,目標物件錯誤



現在用jquery的html試試,

複製程式碼 程式碼如下:


$(tbody).html('<tr><td>IE下tbody的innerHTML是隻讀的</td></tr>');


發現IE下用jquery能正確顯示了,沒任何問題。 
後來查閱資料才知道,原來IE下tbody、tr這些的innerHTML都是隻讀的,不允許寫入,而在其他瀏覽器下則沒問題。 

而jquery裡是用了try,catch來檢測,如果報錯則在catch裡重新呼叫this.empty().append(value),是通過append來新增字串的。 

jquery 如何使用innerHTML

 

$("#responsediv") 是個Jquery物件,它Val()是對Value屬性賦值對它無意義,Jquery沒有innerHTML這個屬性,應該這樣寫$("#responsediv")[0].innerHTML=msg 就可以獲得這個Dom物件使用innerHTML。

IE裡有些元素的innerHTML是隻讀的

在IE6,IE7,IE8,IE9裡面 col, colGroup, frameSet, html, head, style,table, tBody, tFoot, tHead, title, tr 這幾個的innerHTML屬性是隻讀的,不可以賦值,賦值的話就指令碼報錯。IE10這些標籤的innerHTML改成可寫的了。

既然在IE6-IE9裡這些標籤的innerHTML屬性是隻讀的,那麼我們儘量避免對這些標籤的innerHTML屬性賦值,比如說對table的innerHTML可以改為對table父元素(假設是div)的innerHTML屬性賦值。

html()函式的優點

看看innerHTML屬性的缺點,就知道jQuery中html()函式的優點了,它是相容所有瀏覽的,不存在html5標籤不支援的問題,不存在href,src屬性被轉換的問題,不存在某些標籤設定不了html串的問題,總之就是一句話,用它基本就萬事無憂了,至少功能的實現上是這樣。

html()函式的缺點

看來jQuery的html()函式似乎完美無限了,其實不然,它的完美只表現它的功能上,它相容了所有瀏覽器,包括IE。但偏偏也是IE,儘管相容了,效能並不樂觀,如果使用html()函式設定大資料量的html串的話,那將是場災難。