What are the differences and applications of emptying elements html (& quot;") innerHTML="" and empty ()

Today, I would like to talk to you about the difference and application of the emptying element html (") innerHTML=" and empty (). Many people may not know much about it. In order to make you understand better, the editor summed up the following content for you. I hope you can get something according to this article.

I. the difference between emptying elements

1. Wrong practice 1:

$("# test") .html (""); / / this will result in a memory leak

2. Wrong practice 2:

$("# test") [0] [xss_clean] = ""; / / this will result in a memory leak

3. Correct practice:

/ / $("# test") .empty ()

Second, principle:

Using the innerHTML method to clear elements in jQuery will inevitably lead to memory leaks, because jquery does not directly use the browser event model for multi-event handling of the same element, but caches events, traverses triggers, and facilitates trigger programs to trigger:

/ / Init the element's event structure var events = jQuery.data (elem, "events") | | jQuery.data (elem, "events", {}), handle = jQuery.data (elem, "handle") | | jQuery.data (elem, "handle", function () {/ / Handle the second event of a trigger and when / / an event is called after a page has unloaded return typeof jQuery! = "undefined" & &! jQuery.event.triggered? JQuery.event.handle.apply (arguments.callee.elem, arguments): undefined;})

Using the data method, some data is associated to the element, and the above events use this mechanism to cache event listeners.

Then you can know that directly innerHTML= "" without telling jquery to clear the data associated with the element to be deleted, then this part of the data can no longer be released, that is, a memory leak.

Remove: function (selector) {if (! selector | | jQuery.filter (selector, [this]) .length) {/ / Prevent memory leaks jQuery ("*", this). Add ([this]) .each (function () {jQuery.event.remove (this); jQuery.removeData (this);}); if (this [XSS _ clean]) this[ clean] .removeChild (this) }, empty: function () {/ / Remove element nodes and prevent memory leaks jQuery (this). Children (). Remove (); / Remove any remaining nodes while (this.firstChild) this.removeChild (this.firstChild);} after reading the above, do you have any further understanding of the difference and application of the emptying element html (") innerHTML=" and empty ()? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.