jquery html vs append

Question

Lets say I have an empty div    lt div id  myDiv  gt  lt  div gt    Is this       myDiv   html   lt div id  mySecondDiv  gt  lt  div gt       The same as   var mySecondDiv     lt div id  mySecondDiv  gt  lt  div gt         myDiv   append mySecondDiv

User · Answer

They are not the same  The first one replaces the HTML without creating another jQuery object first  The second creates an additional jQuery wrapper for the second div  then appends it to the first   One jQuery Wrapper  per example        myDiv   html   lt div id  mySecondDiv  gt  lt  div gt          myDiv   append   lt div id  mySecondDiv  gt  lt  div gt       Two jQuery Wrappers  per example    var mySecondDiv     lt div id  mySecondDiv  gt  lt  div gt         myDiv   html mySecondDiv    var mySecondDiv     lt div id  mySecondDiv  gt  lt  div gt         myDiv   append mySecondDiv     You have a few different use cases going on  If you want to replace the content   html is a great call since its the equivalent of innerHTML          However  if you just want to append content  the extra     wrapper set is unneeded   Only use two wrappers if you need to manipulate the added div later on  Even in that case  you still might only need to use one   var mySecondDiv       lt div id  mySecondDiv  gt  lt  div gt    appendTo   myDiv       other code here mySecondDiv hide

User · Answer

This has happened to me   Jquery version   3 3   If you are looping through a list of objects  and want to add each object as a child of some parent dom element  then  html and  append will behave very different   html will end up adding only the last object to the parent element  whereas  append will add all the list objects as children of the parent element

User · Answer

if by  add you mean  append  then the result is the same if  myDiv is empty   is the performance the same  dont know    html x  ends up doing the same thing as  empty   append x

User · Answer

Other than the given answers  in the case that you have something like this    lt div id  test  gt       lt input type  file  name  file0  onchange  changed    gt   lt  div gt   lt script type  text javascript  gt      var isAllowed   true      function changed                 if  isAllowed                        var tmpHTML       test   html                tmpHTML      lt input type   file   name   file1   onchange   changed     gt                    test   html tmpHTML               isAllowed   false                   lt  script gt    meaning that you want to automatically add one more file upload if any files were uploaded  the mentioned code will not work  because after the file is uploaded  the first file-upload element will be recreated and therefore the uploaded file will be wiped from it  You should use  append   instead       function changed                 if  isAllowed                        var tmpHTML     lt input type   file   name   file1   onchange   changed     gt                    test   append tmpHTML               isAllowed   false

User · Answer

html   will replace everything     append   will just append at the end

User · Answer

You can get the second method to achieve the same effect by   var mySecondDiv       lt div gt  lt  div gt       mySecondDiv  find  div   attr  id    mySecondDiv        myDiv   append mySecondDiv     Luca mentioned that html   just inserts hte HTML which results in faster performance   In some occassions though  you would opt for the second option  consider      Clumsy string concat  error prone     myDiv   html   lt div style  width      myWidth     px  gt Lorem ipsum lt  div gt         Isn t this a lot cleaner   though longer  var newDiv       lt div gt  lt  div gt       newDiv  find  div   css  width   myWidth       myDiv   append newDiv

User · Answer

Well   html   uses  innerHTML which is faster than DOM creation

User · Answer

Whenever you pass a string of HTML to any of jQuery s methods  this is what happens   A temporary element is created  let s call it x  x s innerHTML is set to the string of HTML that you ve passed  Then jQuery will transfer each of the produced nodes  that is  x s childNodes  over to a newly created document fragment  which it will then cache for next time  It will then return the fragment s childNodes as a fresh DOM collection    Note that it s actually a lot more complicated than that  as jQuery does a bunch of cross-browser checks and various other optimisations  E g  if you pass just  lt div gt  lt  div gt  to jQuery    jQuery will take a shortcut and simply do document createElement  div     EDIT  To see the sheer quantity of checks that jQuery performs  have a look here  here and here     innerHTML is generally the faster approach  although don t let that govern what you do all the time  jQuery s approach isn t quite as simple as element innerHTML       -- as I mentioned  there are a bunch of checks and optimisations occurring      The correct technique depends heavily on the situation  If you want to create a large number of identical elements  then the last thing you want to do is create a massive loop  creating a new jQuery object on every iteration  E g  the quickest way to create 100 divs with jQuery   jQuery Array 101  join   lt div gt  lt  div gt          There are also issues of readability and maintenance to take into account   This       lt div id      someID      class  foobar  gt     content     lt  div gt           is a lot harder to maintain than this       lt div  gt          id  someID      className   foobar       html  content

[jquery] jquery .html() vs .append()

Examples related to jquery

Examples related to html