2

Is there any difference in speed between: 

$('<div>', {id: 'bla', click: func, css: { opacity:0.5 } }

and doing it all inline? 

$('<div id="bla" style="opacity:0.5"></div>').click(func);

What does jquery do internally for the second example? Just call .innerHTML or does it try to parse it and then do it exactly the same was as the first example?

2 Answers2

1

When we pass html markup as an input to $() it uses document.createDocumentFragment to create the elements on the fly and then uses childnodes property to retrieve the actual elements and performs the required operation.

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • Are you sure about this? If this is true, how come you can do `$("
    Test
    ").append("
    Test
    ")` returning a nested object entirely in the DOM?     – pixelbobby Aug 05 '11 at 18:18
  • 2
    I think so it puts as a innerHTML of any wrapper element and then attaches the click event to the inner element. This is my guess, I haven't seen the source code to confirm it :) – ShankarSangoli Aug 05 '11 at 18:19
  • Bad... Shankar... bad. no treats for you. – pixelbobby Aug 05 '11 at 18:21
  • What do you guys think before down voting me? That was my guess and I wrote it down. I can always go through the source code and find it out. And whatever I have mentioned makes a sense. – ShankarSangoli Aug 05 '11 at 18:23
  • @ShankarSangoli I have given a +1 to balance. Now, prove (or disprove) the hypothesis based on the code available (and/or other references) to make this a complete answer. As it is now, it is bordering on the edge of just a comment. –  Aug 05 '11 at 18:41
  • Thanks @pst I will find it out for sure :) – ShankarSangoli Aug 05 '11 at 18:43
  • @All - I went through the jquery source code and found out that in this case it uses `document.createDocumentFragment` to create the markup structure at once and uses childNodes property to get all the childrens of this fragment which is basically the markup we provide as input. I think my guess was almost right. – ShankarSangoli Aug 05 '11 at 20:29
  • Thanks for investigating @ShankarSangoli - you should consider updating your answer. –  Aug 05 '11 at 22:24
  • @TomalakGeret'kal: Well jQuery does use `innerHTML` to create new elements when you pass something more than just a *tag string*. If it has attributes, jQuery doesn't try to parse out the attributes, but instead creates a `
    ` element, wraps the HTML with appropriate parent elements (if needed), sets it to the `.innerHTML` of the `
    `, then extracts the DOM elements. This is done in the internal [`jQuery.clean()`](https://github.com/jquery/jquery/blob/1.6.2/src/manipulation.js#L591-703), which you can actually access from the global `jQuery`. [jsFiddle DEMO.](http://jsfiddle.net/3SSRM/)
     – user113716 Sep 30 '11 at 14:13
0

The best way to decide if one snippet is better than the other is to benchmark them yourself.

You can use jsPerf.com to benchmark your code.

Turns out the second version is faster in Firefox and they are about the same on Chrome.

http://jsperf.com/test-jquery-element-creator

Eduardo
  • 22,574
  • 11
  • 76
  • 94
  • Interesting resource and thanks. I's faster in safari as well (as a string): 26,229 operations/sec versus 19,687. –  Aug 06 '11 at 08:17