在一個(gè) HTML 文檔中, 我們可以使用 .html() 方法來(lái)獲取任意一個(gè)元素的內(nèi)容。 如果選擇器匹配多于一個(gè)的元素，那么只有第一個(gè)匹配元素的 HTML 內(nèi)容會(huì)被獲取。
innerHTML 是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的，jquery是多此一舉了，直到我遇到一次問(wèn)題
看個(gè)示例：
復(fù)制代碼 代碼如下:
var tbody=document.createElement('tbody');
tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只讀的</td></tr>'; //在IE下報(bào)錯(cuò)，目標(biāo)對(duì)象錯(cuò)誤
現(xiàn)在用jquery的html試試，
復(fù)制代碼 代碼如下:
$(tbody).html('<tr><td>IE下tbody的innerHTML是只讀的</td></tr>');
發(fā)現(xiàn)IE下用jquery能正確顯示了，沒(méi)任何問(wèn)題。
后來(lái)查閱資料才知道，原來(lái)IE下tbody、tr這些的innerHTML都是只讀的，不允許寫(xiě)入，而在其他瀏覽器下則沒(méi)問(wèn)題。
而jquery里是用了try，catch來(lái)檢測(cè)，如果報(bào)錯(cuò)則在catch里重新調(diào)用this.empty().append(value)，是通過(guò)append來(lái)添加字符串的。
jquery 如何使用innerHTML
$("#responsediv") 是個(gè)Jquery對(duì)象，它Val()是對(duì)Value屬性賦值對(duì)它無(wú)意義，Jquery沒(méi)有innerHTML這個(gè)屬性，應(yīng)該這樣寫(xiě)$("#responsediv")[0].innerHTML=msg 就可以獲得這個(gè)Dom對(duì)象使用innerHTML。
IE里有些元素的innerHTML是只讀的
在IE6,IE7,IE8,IE9里面 col, colGroup, frameSet, html, head, style,table, tBody, tFoot, tHead, title, tr 這幾個(gè)的innerHTML屬性是只讀的，不可以賦值，賦值的話就腳本報(bào)錯(cuò)。IE10這些標(biāo)簽的innerHTML改成可寫(xiě)的了。
既然在IE6-IE9里這些標(biāo)簽的innerHTML屬性是只讀的，那么我們盡量避免對(duì)這些標(biāo)簽的innerHTML屬性賦值，比如說(shuō)對(duì)table的innerHTML可以改為對(duì)table父元素(假設(shè)是div)的innerHTML屬性賦值。
html()函數(shù)的優(yōu)點(diǎn)
看看innerHTML屬性的缺點(diǎn)，就知道jQuery中html()函數(shù)的優(yōu)點(diǎn)了，它是兼容所有瀏覽的，不存在html5標(biāo)簽不支持的問(wèn)題，不存在href,src屬性被轉(zhuǎn)換的問(wèn)題，不存在某些標(biāo)簽設(shè)置不了html串的問(wèn)題，總之就是一句話，用它基本就萬(wàn)事無(wú)憂了，至少功能的實(shí)現(xiàn)上是這樣。
html()函數(shù)的缺點(diǎn)
看來(lái)jQuery的html()函數(shù)似乎完美無(wú)限了，其實(shí)不然，它的完美只表現(xiàn)它的功能上，它兼容了所有瀏覽器，包括IE。但偏偏也是IE，盡管兼容了，性能并不樂(lè)觀，如果使用html()函數(shù)設(shè)置大數(shù)據(jù)量的html串的話，那將是場(chǎng)災(zāi)難。
在IE下，html()函數(shù)的性能到底低到什么程度？電腦的配置為"i5 四核，8G內(nèi)存，IE9"，測(cè)試了用html()函數(shù)設(shè)置2000行4列的table，其平均耗時(shí)達(dá)到27秒！具體什么原因?qū)е耯tml()在IE下這么慢，個(gè)人粗略看過(guò)源碼，覺(jué)得使用try方式是主要原因之一，有興趣的同學(xué)可以深入研究一下。
聯(lián)系客服
