InnerHtml 與html 的區別

2022-03-19 17:22:52 字數 1447 閱讀 1459

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

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

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

看個示例:

複製** **如下:

var tbody=document.createelement('tbody');

tbody.innerhtml='ie下tbody的innerhtml是唯讀的

'; //在ie下報錯,目標物件錯誤

現在用jquery的html試試,

複製** **如下:

$(tbody).html('ie下tbody的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方式是主要原因之一,有興趣的同學可以深入研究一下。

innerHTML與outerHTML的區別

1.innerhtml與outerhtml的區別 innerhtml 得出呼叫該方法的節點下的html 但不包括該節點本身的html outerhtml 得出呼叫該方法的節點及該節點下的html 一般的容器裡都有,可以參考msdn,比如這樣。有這樣的 some information 則window...

outerHTML與innerHTML的不同

outerhtml的用法與innerhtml不同,outerhtml包括整個標籤,而不僅限於標籤內部的內容。對於乙個id為 testdiv 的div來說,outerhtml innerhtml以及innertext三者的區別可以通過下圖展示出來 與innerhtml不同,outerhtml包括整個標...

innerText與innerHTML的區別

innertext可以獲取標籤間的內容,如果標籤間只有文字的話,則是直接獲取。如果標籤間還有巢狀標籤的話,則會將巢狀標籤忽略掉獲取文字。innertext在給標籤設定內容的時候,如果是純文字內容的話,則直接設定或者覆蓋設定。如果標籤間還有巢狀標籤的話,設定文字的時候只會顯示文字,若加上文字標籤,則會...