The preferred way of creating a new element with jQuery

Question

I ve got 2 ways I can create a  lt div gt  using jQuery   Either   var div       lt div gt  lt  div gt         box   append div     Or       box   append   lt div gt  lt  div gt       What are the drawbacks of using second way other than re-usability

User · Answer

According to the jQuery official documentation

To create a HTML element, $("<div/>") or $("<div></div>") is preferred.

Then you can use either appendTo, append, before, after and etc,. to insert the new element to the DOM.

PS: jQuery Version 1.11.x

User · Answer

If  box is empty  nothing  but if it s not these do very different things   The former will add a div as the last child node of  box   The latter completely replaces the contents of  box with a single empty div  text and all

User · Answer

The first option gives you more flexibilty   var  div       lt div gt     id   foo    class    a      div click function                      box   append  div     And of course  html      overrides the content while  append      doesn t  but I guess  this wasn t your question   Another good practice is prefixing your jQuery variables with    Is there any specific reason behind using   with variable in jQuery  Placing quotes around the  class  property name will make it more compatible with less flexible browsers

User · Answer

I personally think that it s more important for the code to be readable and editable than performant  Whichever one you find easier to look at and it should be the one you choose for above factors   You can write it as       box   append        lt div  gt         attr  id    newDiv1        addClass  newDiv purple bloated        append   lt span  gt           text  hello world        And your first Method as      create an element with an object literal  defining properties var  e       lt div gt     id   newDiv1   name   test   class   aClass      e click function                     add the element to the body     box   append  e     But as far as readability goes  the jQuery approach is my favorite  Follow this Helpful jQuery Tricks  Notes  and Best Practices

User · Answer

Much more expressive way   jQuery   lt div  gt           id    foo        name    mainDiv        class    wrapper        click   function           jQuery this  toggleClass  test            appendTo  selector      Reference  Docs

User · Answer

I would recommend the first option  where you actually build elements using jQuery  the second approach simply sets the innerHTML property of the element to a string  which happens to be HTML  and is more error prone and less flexible

User · Answer

It is also possible to create a div element in the following way     var my div   document createElement  div      add class    my div classList add  col-10      also can perform append   and appendChild

User · Answer

According to the documentation for 3 4  It is preferred to use attributes with attr   method       lt div gt  lt  div gt    attr          id   some dynanmic static id        class    some dynanmic static class        click function           span   this   addClass   bar        example from the docs

[javascript] The preferred way of creating a new element with jQuery

Examples related to javascript

Examples related to jquery

Examples related to append

Examples related to createelement

Examples related to jquery-append