jQuery document createElement equivalent

Question

I m refactoring some old JavaScript code and there s a lot of DOM manipulation going on   var d   document  var odv   d createElement  div    odv style display    none   this OuterDiv   odv   var t   d createElement  table    t cellSpacing   0  t className    text   odv appendChild t     I would like to know if there is a better way to do this using jQuery  I ve been experimenting with   var odv     create  div      append odv      And many more   But I m not sure if this is any better

User · Answer

Simply supplying the HTML of elements you want to add to a jQuery constructor $() will return a jQuery object from newly built HTML, suitable for being appended into the DOM using jQuery's append() method.

For example:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

You could then populate this table programmatically, if you wished.

This gives you the ability to specify any arbitrary HTML you like, including class names or other attributes, which you might find more concise than using createElement and then setting attributes like cellSpacing and className via JS.

User · Answer

It s all pretty straight forward  Heres a couple quick examples       var  example      XMLDocRoot        var  element       example 0  createElement  tag         Note the  0   which is the root   element attr   id   1   hello   world          var  example find  parent  gt  child   append   element

User · Answer

Creating new DOM elements is a core feature of the jQuery   method  see    http   api jquery com jQuery  creating-new-elements and particulary http   api jquery com jQuery  example-1-1

User · Answer

UPDATE  As of the latest versions of jQuery  the following method doesn t assign properties passed in the second Object  Previous answer  I feel using document createElement  div   together with jQuery is faster     document createElement  div          text   Div text        class    className     appendTo   parentDiv

User · Answer

Not mentioned in previous answers  so I m adding working example how to create element elements with latest jQuery  also with additional attributes like content  class  or onclick callback    x000D   x000D  const mountpoint    https   jsonplaceholder typicode com users  x000D   x000D  const  button      button   x000D  const  tbody      tbody   x000D   x000D  const loadAndRender        gt    x000D      getJSON mountpoint  then data   gt    x000D   x000D        each data   index    id  username  name  email      gt    x000D        let row       lt tr gt    x000D           append     lt td gt      text  id     x000D           append     lt td gt      x000D            text  username  x000D            class   click-me   x000D            on    x000D              click      gt    x000D                console log name  x000D                x000D              x000D              x000D           append     lt td gt      text  email     x000D   x000D         tbody append row  x000D         x000D   x000D       x000D    x000D   x000D   button on  click   loadAndRender  x000D   click-me   x000D    background-color  lightgrey x000D    x000D   lt table style  width  100   gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt ID lt  th gt  x000D         lt th gt Username lt  th gt  x000D         lt th gt Email lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D     x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt button gt Load and render lt  button gt  x000D   x000D   lt script src  https   code jquery com jquery-3 3 1 min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

jQuery out of the box doesn t have the equivalent of a createElement   In fact the majority of jQuery s work is done internally using innerHTML over pure DOM manipulation   As Adam mentioned above this is how you can achieve similar results   There are also plugins available that make use of the DOM over innerHTML like appendDOM  DOMEC and FlyDOM just to name a few   Performance wise the native jquery is still the most performant  mainly becasue it uses innerHTML

User · Answer

var div       lt div  gt     div append  Hello World       Is the shortest easiest way to create a DIV element in jQuery

User · Answer

Here s your example in the  one  line   this  OuterDiv       lt div gt  lt  div gt         hide        append     lt table gt  lt  table gt             attr   cellSpacing   0             addClass  text               Update  I thought I d update this post since it still gets quite a bit of traffic  In the comments below there s some discussion about     lt div gt    vs     lt div gt  lt  div gt    vs   document createElement  div    as a way of creating new elements  and which is  best    I put together a small benchmark  and here are roughly the results of repeating the above options 100 000 times   jQuery 1 4  1 5  1 6                 Chrome 11  Firefox 4   IE9  lt div gt             440ms      640ms    460ms  lt div gt  lt  div gt       420ms      650ms    480ms createElement    100ms      180ms    300ms   jQuery 1 3                  Chrome 11  lt div gt              770ms  lt div gt  lt  div gt       3800ms createElement     100ms   jQuery 1 2                  Chrome 11  lt div gt             3500ms  lt div gt  lt  div gt       3500ms createElement     100ms   I think it s no big surprise  but document createElement is the fastest method  Of course  before you go off and start refactoring your entire codebase  remember that the differences we re talking about here  in all but the archaic versions of jQuery  equate to about an extra 3 milliseconds per thousand elements      Update 2  Updated for jQuery 1 7 2 and put the benchmark on JSBen ch which is probably a bit more scientific than my primitive benchmarks  plus it can be crowdsourced now   http   jsben ch   ARUtz

User · Answer

It s all pretty straight forward  Heres a couple quick examples       var  example      XMLDocRoot        var  element       example 0  createElement  tag         Note the  0   which is the root   element attr   id   1   hello   world          var  example find  parent  gt  child   append   element

User · Answer

var div       lt div  gt     div append  Hello World       Is the shortest easiest way to create a DIV element in jQuery

User · Answer

What about this  for example when you want to add a  lt option gt  element inside a  lt select gt      lt option  gt       val optionVal     text  some option      appendTo   mySelect    You can obviously apply to any element     lt div  gt       css  border-color   red     text  some text      appendTo   parentDiv

User · Answer

Though this is a very old question  I thought it would be nice to update it with recent information   Since jQuery 1 8 there is a jQuery parseHTML   function which is now a preferred way of creating elements  Also  there are some issues with parsing HTML via     html code goes here     fo example official jQuery website mentions the following in one of their release notes      Relaxed HTML parsing  You can once again have leading spaces or   newlines before tags in   htmlString   We still strongly advise that   you use   parseHTML   when parsing HTML obtained from external   sources  and may be making further changes to HTML parsing in the   future    To relate to the actual question  provided example could be translated to   this  OuterDiv       parseHTML   lt div gt  lt  div gt          hide        append     parseHTML   lt table gt  lt  table gt              attr   cellSpacing   0             addClass  text             which is unfortunately less convenient than using just      but it gives you more control  for example you may choose to exclude script tags  it will leave inline scripts like onclick though     gt    parseHTML   lt div onclick  a  gt  lt  div gt  lt script gt  lt  script gt      lt div onclick   a  gt   lt  div gt      gt    parseHTML   lt div onclick  a  gt  lt  div gt  lt script gt  lt  script gt    document  true    lt div onclick   a  gt   lt  div gt     lt script gt   lt  script gt      Also  here s a benchmark from the top answer adjusted to the new reality   JSbin Link  jQuery 1 9 1       parseHTML     88ms       parseHTML   240ms    lt div  lt  div      138ms    lt div            143ms   createElement   64ms   It looks like parseHTML is much closer to createElement than      but all the boost is gone after wrapping the results in a new jQuery object

User · Answer

Here s your example in the  one  line   this  OuterDiv       lt div gt  lt  div gt         hide        append     lt table gt  lt  table gt             attr   cellSpacing   0             addClass  text               Update  I thought I d update this post since it still gets quite a bit of traffic  In the comments below there s some discussion about     lt div gt    vs     lt div gt  lt  div gt    vs   document createElement  div    as a way of creating new elements  and which is  best    I put together a small benchmark  and here are roughly the results of repeating the above options 100 000 times   jQuery 1 4  1 5  1 6                 Chrome 11  Firefox 4   IE9  lt div gt             440ms      640ms    460ms  lt div gt  lt  div gt       420ms      650ms    480ms createElement    100ms      180ms    300ms   jQuery 1 3                  Chrome 11  lt div gt              770ms  lt div gt  lt  div gt       3800ms createElement     100ms   jQuery 1 2                  Chrome 11  lt div gt             3500ms  lt div gt  lt  div gt       3500ms createElement     100ms   I think it s no big surprise  but document createElement is the fastest method  Of course  before you go off and start refactoring your entire codebase  remember that the differences we re talking about here  in all but the archaic versions of jQuery  equate to about an extra 3 milliseconds per thousand elements      Update 2  Updated for jQuery 1 7 2 and put the benchmark on JSBen ch which is probably a bit more scientific than my primitive benchmarks  plus it can be crowdsourced now   http   jsben ch   ARUtz

User · Answer

UPDATE  As of the latest versions of jQuery  the following method doesn t assign properties passed in the second Object  Previous answer  I feel using document createElement  div   together with jQuery is faster     document createElement  div          text   Div text        class    className     appendTo   parentDiv

User · Answer

jQuery out of the box doesn t have the equivalent of a createElement   In fact the majority of jQuery s work is done internally using innerHTML over pure DOM manipulation   As Adam mentioned above this is how you can achieve similar results   There are also plugins available that make use of the DOM over innerHTML like appendDOM  DOMEC and FlyDOM just to name a few   Performance wise the native jquery is still the most performant  mainly becasue it uses innerHTML

User · Answer

since jQuery1 8  using   parseHTML   to create elements is a better choice   there are two benefits   1 if you use the old way  which may be something like   string   jQuery will examine the string to make sure you want to select a html tag or create a new element  By using   parseHTML    you tell jQuery that you want to create a new element explicitly  so the performance may be a little better   2 much more important thing is that you may suffer from cross site attack  more info  if you use the old way  if you have something like       var userInput   window prompt  please enter selector          userInput  hide      a bad guy can input  lt script src  xss-attach js  gt  lt  script gt  to tease you  fortunately    parseHTML   avoid this embarrassment for you   var a       lt div gt       a is   lt div gt   lt  div gt    var b     parseHTML   lt div gt       b is   lt div gt   lt  div gt        lt script src  xss-attach js  gt  lt  script gt       jQuery returns   lt script src   xss-attach js  gt   lt  script gt      parseHTML   lt script src  xss-attach js  gt  lt  script gt       jQuery returns      However  please notice that a is a jQuery object while b is a html element   a html  123        lt div gt  123  lt  div gt    b html  123      TypeError  Object  object HTMLDivElement  has no method  html    b  html  123        lt div gt  123  lt  div gt

User · Answer

jQuery out of the box doesn t have the equivalent of a createElement   In fact the majority of jQuery s work is done internally using innerHTML over pure DOM manipulation   As Adam mentioned above this is how you can achieve similar results   There are also plugins available that make use of the DOM over innerHTML like appendDOM  DOMEC and FlyDOM just to name a few   Performance wise the native jquery is still the most performant  mainly becasue it uses innerHTML

User · Answer

I ve just made a small jQuery plugin for that  https   github com ern0 jquery create  It follows your syntax   var myDiv     create  div      DOM node ID can be specified as second parameter   var secondItem     create  div   item2      Is it serious  No  But this syntax is better than     lt div gt  lt  div gt     and it s a very good value for that money   I m a new jQuery user  switching from DOMAssistant  which has a similar function  http   www domassistant com documentation DOMAssistantContent-module php  My plugin is simpler  I think attrs and content is better to add by chaining methods       container   append    create  div   addClass  box   html  Hello  world         Also  it s a good example for a simple jQuery-plugin  the 100th one

User · Answer

Simply supplying the HTML of elements you want to add to a jQuery constructor $() will return a jQuery object from newly built HTML, suitable for being appended into the DOM using jQuery's append() method.

For example:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

You could then populate this table programmatically, if you wished.

This gives you the ability to specify any arbitrary HTML you like, including class names or other attributes, which you might find more concise than using createElement and then setting attributes like cellSpacing and className via JS.

User · Answer

jQuery out of the box doesn t have the equivalent of a createElement   In fact the majority of jQuery s work is done internally using innerHTML over pure DOM manipulation   As Adam mentioned above this is how you can achieve similar results   There are also plugins available that make use of the DOM over innerHTML like appendDOM  DOMEC and FlyDOM just to name a few   Performance wise the native jquery is still the most performant  mainly becasue it uses innerHTML

User · Answer

I m doing like that       lt div  gt         text   Div text       class   className     appendTo   parentDiv

User · Answer

I m doing like that       lt div  gt         text   Div text       class   className     appendTo   parentDiv

User · Answer

Not mentioned in previous answers  so I m adding working example how to create element elements with latest jQuery  also with additional attributes like content  class  or onclick callback    x000D   x000D  const mountpoint    https   jsonplaceholder typicode com users  x000D   x000D  const  button      button   x000D  const  tbody      tbody   x000D   x000D  const loadAndRender        gt    x000D      getJSON mountpoint  then data   gt    x000D   x000D        each data   index    id  username  name  email      gt    x000D        let row       lt tr gt    x000D           append     lt td gt      text  id     x000D           append     lt td gt      x000D            text  username  x000D            class   click-me   x000D            on    x000D              click      gt    x000D                console log name  x000D                x000D              x000D              x000D           append     lt td gt      text  email     x000D   x000D         tbody append row  x000D         x000D   x000D       x000D    x000D   x000D   button on  click   loadAndRender  x000D   click-me   x000D    background-color  lightgrey x000D    x000D   lt table style  width  100   gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt ID lt  th gt  x000D         lt th gt Username lt  th gt  x000D         lt th gt Email lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D     x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt button gt Load and render lt  button gt  x000D   x000D   lt script src  https   code jquery com jquery-3 3 1 min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

since jQuery1 8  using   parseHTML   to create elements is a better choice   there are two benefits   1 if you use the old way  which may be something like   string   jQuery will examine the string to make sure you want to select a html tag or create a new element  By using   parseHTML    you tell jQuery that you want to create a new element explicitly  so the performance may be a little better   2 much more important thing is that you may suffer from cross site attack  more info  if you use the old way  if you have something like       var userInput   window prompt  please enter selector          userInput  hide      a bad guy can input  lt script src  xss-attach js  gt  lt  script gt  to tease you  fortunately    parseHTML   avoid this embarrassment for you   var a       lt div gt       a is   lt div gt   lt  div gt    var b     parseHTML   lt div gt       b is   lt div gt   lt  div gt        lt script src  xss-attach js  gt  lt  script gt       jQuery returns   lt script src   xss-attach js  gt   lt  script gt      parseHTML   lt script src  xss-attach js  gt  lt  script gt       jQuery returns      However  please notice that a is a jQuery object while b is a html element   a html  123        lt div gt  123  lt  div gt    b html  123      TypeError  Object  object HTMLDivElement  has no method  html    b  html  123        lt div gt  123  lt  div gt

User · Answer

Simply supplying the HTML of elements you want to add to a jQuery constructor $() will return a jQuery object from newly built HTML, suitable for being appended into the DOM using jQuery's append() method.

For example:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

You could then populate this table programmatically, if you wished.

This gives you the ability to specify any arbitrary HTML you like, including class names or other attributes, which you might find more concise than using createElement and then setting attributes like cellSpacing and className via JS.

User · Answer

Creating new DOM elements is a core feature of the jQuery   method  see    http   api jquery com jQuery  creating-new-elements and particulary http   api jquery com jQuery  example-1-1

User · Answer

Though this is a very old question  I thought it would be nice to update it with recent information   Since jQuery 1 8 there is a jQuery parseHTML   function which is now a preferred way of creating elements  Also  there are some issues with parsing HTML via     html code goes here     fo example official jQuery website mentions the following in one of their release notes      Relaxed HTML parsing  You can once again have leading spaces or   newlines before tags in   htmlString   We still strongly advise that   you use   parseHTML   when parsing HTML obtained from external   sources  and may be making further changes to HTML parsing in the   future    To relate to the actual question  provided example could be translated to   this  OuterDiv       parseHTML   lt div gt  lt  div gt          hide        append     parseHTML   lt table gt  lt  table gt              attr   cellSpacing   0             addClass  text             which is unfortunately less convenient than using just      but it gives you more control  for example you may choose to exclude script tags  it will leave inline scripts like onclick though     gt    parseHTML   lt div onclick  a  gt  lt  div gt  lt script gt  lt  script gt      lt div onclick   a  gt   lt  div gt      gt    parseHTML   lt div onclick  a  gt  lt  div gt  lt script gt  lt  script gt    document  true    lt div onclick   a  gt   lt  div gt     lt script gt   lt  script gt      Also  here s a benchmark from the top answer adjusted to the new reality   JSbin Link  jQuery 1 9 1       parseHTML     88ms       parseHTML   240ms    lt div  lt  div      138ms    lt div            143ms   createElement   64ms   It looks like parseHTML is much closer to createElement than      but all the boost is gone after wrapping the results in a new jQuery object

User · Answer

Simply supplying the HTML of elements you want to add to a jQuery constructor $() will return a jQuery object from newly built HTML, suitable for being appended into the DOM using jQuery's append() method.

For example:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

You could then populate this table programmatically, if you wished.

This gives you the ability to specify any arbitrary HTML you like, including class names or other attributes, which you might find more concise than using createElement and then setting attributes like cellSpacing and className via JS.

User · Answer

Here s your example in the  one  line   this  OuterDiv       lt div gt  lt  div gt         hide        append     lt table gt  lt  table gt             attr   cellSpacing   0             addClass  text               Update  I thought I d update this post since it still gets quite a bit of traffic  In the comments below there s some discussion about     lt div gt    vs     lt div gt  lt  div gt    vs   document createElement  div    as a way of creating new elements  and which is  best    I put together a small benchmark  and here are roughly the results of repeating the above options 100 000 times   jQuery 1 4  1 5  1 6                 Chrome 11  Firefox 4   IE9  lt div gt             440ms      640ms    460ms  lt div gt  lt  div gt       420ms      650ms    480ms createElement    100ms      180ms    300ms   jQuery 1 3                  Chrome 11  lt div gt              770ms  lt div gt  lt  div gt       3800ms createElement     100ms   jQuery 1 2                  Chrome 11  lt div gt             3500ms  lt div gt  lt  div gt       3500ms createElement     100ms   I think it s no big surprise  but document createElement is the fastest method  Of course  before you go off and start refactoring your entire codebase  remember that the differences we re talking about here  in all but the archaic versions of jQuery  equate to about an extra 3 milliseconds per thousand elements      Update 2  Updated for jQuery 1 7 2 and put the benchmark on JSBen ch which is probably a bit more scientific than my primitive benchmarks  plus it can be crowdsourced now   http   jsben ch   ARUtz

User · Answer

var mydiv       lt div   gt       also works

User · Answer

Here s your example in the  one  line   this  OuterDiv       lt div gt  lt  div gt         hide        append     lt table gt  lt  table gt             attr   cellSpacing   0             addClass  text               Update  I thought I d update this post since it still gets quite a bit of traffic  In the comments below there s some discussion about     lt div gt    vs     lt div gt  lt  div gt    vs   document createElement  div    as a way of creating new elements  and which is  best    I put together a small benchmark  and here are roughly the results of repeating the above options 100 000 times   jQuery 1 4  1 5  1 6                 Chrome 11  Firefox 4   IE9  lt div gt             440ms      640ms    460ms  lt div gt  lt  div gt       420ms      650ms    480ms createElement    100ms      180ms    300ms   jQuery 1 3                  Chrome 11  lt div gt              770ms  lt div gt  lt  div gt       3800ms createElement     100ms   jQuery 1 2                  Chrome 11  lt div gt             3500ms  lt div gt  lt  div gt       3500ms createElement     100ms   I think it s no big surprise  but document createElement is the fastest method  Of course  before you go off and start refactoring your entire codebase  remember that the differences we re talking about here  in all but the archaic versions of jQuery  equate to about an extra 3 milliseconds per thousand elements      Update 2  Updated for jQuery 1 7 2 and put the benchmark on JSBen ch which is probably a bit more scientific than my primitive benchmarks  plus it can be crowdsourced now   http   jsben ch   ARUtz

User · Answer

var mydiv       lt div   gt       also works

User · Answer

I ve just made a small jQuery plugin for that  https   github com ern0 jquery create  It follows your syntax   var myDiv     create  div      DOM node ID can be specified as second parameter   var secondItem     create  div   item2      Is it serious  No  But this syntax is better than     lt div gt  lt  div gt     and it s a very good value for that money   I m a new jQuery user  switching from DOMAssistant  which has a similar function  http   www domassistant com documentation DOMAssistantContent-module php  My plugin is simpler  I think attrs and content is better to add by chaining methods       container   append    create  div   addClass  box   html  Hello  world         Also  it s a good example for a simple jQuery-plugin  the 100th one

User · Answer

What about this  for example when you want to add a  lt option gt  element inside a  lt select gt      lt option  gt       val optionVal     text  some option      appendTo   mySelect    You can obviously apply to any element     lt div  gt       css  border-color   red     text  some text      appendTo   parentDiv

[javascript] jQuery document.createElement equivalent?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dom

Examples related to dhtml