Home > Developer > Web Develop

[JS] [jQuery] clear elements html (& quot;), innerHTML = & quot; and empty (): jqueryinnerhtml

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

[JS] [jQuery] the difference between clearing elements html (""), innerHTML = "" And empty (): Regarding content leakage, jqueryinnerhtml

Differences between clearing elements html (""), innerHTML = "" And empty ()


I. Differences between clearing elements 1. Incorrect practices 1: $ ("# test" ).html (""); // The method may cause memory leakage
2. Error Method 2: $ ("# test") [0]. innerHTML = ""; // The method may cause memory leakage
3. correct practices:
       //$("#test").empty();


Ii. Principles:

Using the innerHTML method in jquery to clear elements will inevitably lead to memory leakage. Because jquery does not directly use the browser event model for processing multiple events of the same element, it caches events by itself, traversal trigger and trigger:

  1. // Init the element's event structure
  2. Var events = jQuery. data (elem, "events") | jQuery. data (elem, "events ",{}),
  3. Handle = jQuery. data (elem, "handle") | jQuery. data (elem, "handle", function (){
  4. // Handle the second event of a trigger and when
  5. // An event is called after a page has unloaded
  6. Return typeof jQuery! = "Undefined "&&! JQuery. event. triggered?
  7. JQuery. event. handle. apply (arguments. callee. elem, arguments ):
  8. Undefined;
  9. });

The data method is used to associate some data to the element. The preceding event uses this mechanism to cache the event listener.


As you can see, directly innerHTML = "" without notifying jquery to clear the data associated with the elements to be deleted, this part of data will no longer be released, that is, memory leakage.


  1. Remove: function (selector ){
  2. If (! Selector | jQuery. filter (selector, [this]). length ){
  3. // Prevent memory leaks
  4. JQuery ("*", this). add ([this]). each (function (){
  5. JQuery. event. remove (this );
  6. JQuery. removeData (this );
  7. });
  8. If (this. parentNode)
  9. This. parentNode. removeChild (this );
  10. }
  11. },
  13. Empty: function (){
  14. // Remove element nodes and prevent memory leaks
  15. JQuery (this). children (). remove ();
  17. // Remove any remaining nodes
  18. While (this. firstChild)
  19. This. removeChild (this. firstChild );
  20. }


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

Empty (), html (""), and text ("") are the same When deleting the content in the matching element. JQuery source code has different implementations, but the effects are the same. You can test it.
Source code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script src = "../scripts/jquery-1.4.2.min.js" type = "text/javascript"> </script>
<Script>
$ (Function (){
$ ('# BtnEmpty'). click (function (){
$ ('# Aim'). empty ();
Alert ("empty ()");
});
$ ('# BtnHtml'). click (function (){
Certificate ('%aim'%.html ("");
Alert ('html ("")');
});
$ ('# Btntext'). click (function (){
$ ('# Aim'). text ("");
Alert ('text ("")');
});
});

</Script>
</Head>

<Body>
<Div id = "aim">

<Ul>
<Li> 111111111 </li>
<Li> 222222222 </li>
<Li> 333333333 </li>
<Li> 444444444 </li>
</Ul>

</Div>
<Button id = 'btnempty '> empt ...... remaining full text>

Why does jQuery no longer execute the following content after html code is output?

Alert ("ul" example .html ()
This is an error.
What do you mean by printing innerHtml of the <ul> node?
It should be: alert ($ ("ul" example .html ());
Also, do not mix jquery and js elements, which may cause problems.
$ Ul = $ ("ul). children () $ ul is a jquery element.
Therefore, it is best to change $ ul [I]. innerHTML to $ulw. I }.html ()
Also, since jquery is used thoroughly, do not use the for loop.
Try jquery's. each () and look back at the current for. Do you think the for is really inferior?

Good luck :)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
amp html convert html to amp html amp laravel escape amp amp events xxx amp sitefinity amp

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More