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串的話，那將是場災難。

 

在IE下，html()函數的性能到底低到什么程度？電腦的配置為"i5 四核，8G內存，IE9"，測試了用html()函數設置2000行4列的table，其平均耗時達到27秒！具體什么原因導致html()在IE下這么慢，個人粗略看過源碼，覺得使用try方式是主要原因之一，有興趣的同學可以深入研究一下。