Question

Using jQuery what provides for faster object construction:

With the HTML code

$('<dd class="foo baz" id="bar"> foobar </dd>')

Or with the pure object/method variant

$('</dd>').addClass('foo').addClass('baz').id('bar').text('foobar')

I’m not sure how the internals work, feel free to supply a high level summary.

Answer 1

The HTML approach is surely faster, since it can utilize the browser’s built-in innerHTML functionality. It’s also less method calls. A 3rd approach is preferable to your 2nd, although I’d say the first is still the fastest:

$('<dd/>', {
    'class': "foo baz",
    id: "bar",
    text: "foobar"
});

(class is in quotes since its a reserved word) The difference isn’t going to be much though. I’d stick with this 3rd way unless I had a real performance problem, which is only likely if you were doing a ton of this.