jQuery dynamic DOM creation performance

Question

When dynamically creating an HTML element in jQuery, is there any difference performance-wise between the following two methods?

// First approach
var elem = $('<div/>').attr('id', 'foo').addClass('myClass');

// Second approach
var elem = $('<div id="foo" class="myClass" />');

Also, are there any obvious advantages of one approach over the other, or is it just a matter of taste?

Answer 1

I don't think many people realize that the most popular and heavily used component of jQuery - selectors - actually has a lot of magic going on behind the scenes and therefore, uses a bit of resources. Your first approach makes more use of selectors than your second one. I think your second approach is also a lot easier to read and is cleaner. I'd stick with that one.
Approach #1 is more for if you have to modify an element that is already created, but i wouldn't actually create it that way. Hope this helps.

Answer 2

Did a quick test http://jsfiddle.net/XQv4H/3/ and it doesn't appear there is much difference, I got a negligible difference, with the first being a tad faster in most runs.

And I personally find the first way cleaner. Less string parsing. And I've found the less you deal with strings in code, the more stable it becomes.

And taking advantage of the different methods of jQuery will somewhat future proof your code as it will be able to generate elements that will work in any future browser, whereas your string of html may not always stay compliant.

Answer 3

The question is about speed.

"is there any difference performance-wise between the following two methods?"

As with most things to squeeze out a few more operations per second readability goes out the window.

I much prefer the readability of the second but the first is actual faster. (in the browsers I bothered to test)

http://jsperf.com/jquery-dynamic-dom-creation-performance

Answer 4

Besides speed which is discussed in other answers ( the first being slightly faster ), i find the most readable one ( and the one i use ) to be

var elem = $('<div/>', {
    'id': 'foo',
    'class': 'myClass'
});

---

If your target, though, is to achieve best performance then use .prop() instead of .attr()

var elem = $('<div/>').prop('id', 'foo').addClass('myClass');

Comparisons at http://jsperf.com/jquery-dynamic-dom-creation-performance/2

Answer 5

The first method is more readable, but it uses a lot of method chaining . Chaining is not the evil, but is slower than the second method.

The first one in fact create a jquery object and then call two (or more) methods on it. But each time a new $() object is created and returned to the calling chain element.

The second method creates a new element (if the parameter is a correct html string), and then... that's it. Nothing else. Very cheap.

Try to breakpoint both methods and then to follow the debugger step by step.

I suggest you a couple of articles I read sometime ago: I like them.

1. jQuery Performance Rules
2. jQuery and JavaScript Coding: Examples and Best Practices