What is the difference between innerHTML and html() in jquery?

Difference: 1. html() can set read-only tags such as tbody and tr, but innerHTML does not work in lower versions of IE and cannot be assigned. If a value is assigned, the script will report an error; 2. The script set by html() The script will be executed, but the script set by innerHTML will not be executed.

Recommended tutorial: jquery video tutorial

InnerHtml() and html() Difference

##1. html() can set read-only tags such as tbody and tr, but innerHTML cannot be used in lower versions of IE

In a In HTML documents, we can use the .html() method to obtain the content of any element. If the selector matches more than one element, only the HTML content of the first matching element will be retrieved.

innerHTML is the entire content from the starting position to the ending position of the object, including the Html tag

I originally thought that innerHTML and the html in jquery were actually exactly the same, and jquery was superfluous. , until I encountered a problem

Look at an example:

var tbody=document.createElement('tbody');
tbody.innerHTML=&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;; //在IE下报错，目标对象错误

Now try using jquery’s html,

$(tbody).html(&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;);

I found that jquery can be displayed correctly under IE, but no any problem.

After checking the information, I found out:

jQuery's html() has done some fault-tolerance processing. The native Dom API innerHTML does not support some elements, such as table tr and other elements, and tbody under IE. InnerHTML such as , tr and so on are read-only and do not allow writing, but there is no problem in other browsers.

Jquery uses try and catch to detect. If an error is reported, this.empty().append(value) is called again in catch, and the string is added through append.

The innerHTML of some elements in IE is read-only:

In IE6, IE7, IE8, IE9 col, colGroup, frameSet, html, head, style, table, tBody, tFoot The innerHTML attributes of , tHead, title, tr are read-only and cannot be assigned. If they are assigned, the script will report an error. In IE10, the innerHTML of these tags has been changed to be writable.

Since the innerHTML attributes of these tags are read-only in IE6-IE9, we try to avoid assigning values ​​to the innerHTML attributes of these tags. For example, the innerHTML of table can be changed to the table parent element (assuming it is p)'s innerHTML attribute assignment.

2. The script set by html() will be executed, but the script set by innerHTML will not be executed.

Because jQuery will force the script tag in the parameter string to take effect (by create and replace), but the .innerHTML assignment will not.

$(&#39;#app&#39;).html(&#39;<script>alert(1)</script>&#39;)  // 会弹出警告框
$(&#39;#app&#39;)[0].innerHTML = &#39;<script>alert(1)</script>&#39; // 不会弹出警告框
      // ↑使用[0]将jquery对象转为dom对象，只有dom对象才有innerHTML方法，jQuery没有。

Extended information:

Advantages of the html() function

Look at the shortcomings of the innerHTML attribute, and you will know the advantages of the html() function in jQuery The advantage is that it is compatible with all browsers. There is no problem that HTML5 tags are not supported, there is no problem that href and src attributes are converted, and there is no problem that some tags cannot set HTML strings. In short, in one sentence, it is basically Everything is worry-free, at least in terms of functionality.

Disadvantages of the html() function

It seems that jQuery's html() function seems to be infinitely perfect, but in fact it is not. Its perfection only reflects its function. It is compatible with all browsers, including IE. But it happens to be IE. Although it is compatible, the performance is not optimistic. If you use the html() function to set a large amount of html string, it will be a disaster.

How low is the performance of the html() function under IE? The computer configuration is "i5 quad-core, 8G memory, IE9". I tested using the html() function to set a table with 2000 rows and 4 columns, and the average time it took was 27 seconds! What is the specific reason why html() is so slow under IE? I have briefly read the source code and feel that using the try method is one of the main reasons. Interested students can study it in depth.

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of What is the difference between innerHTML and html() in jquery?. For more information, please follow other related articles on the PHP Chinese website!