Create element with attributes ( jQuery 1.4 object vs. attr. )

Benchmark created by Krinkle on

Description

As of jQuery 1.4 we can pass advanced objects with attribtutes, texts and events directly (as second argument) when creating a new element.

This saves additional calls to .text(), .click() or attr() etc.

How do they perform ?

Also in the test: Raw strings that use innerHTML.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  function myFunction() {
   alert("Clicked");
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
AttrString (innerHTML)
$('<span id="foo1" title="Foo 1">Text</span>');
ready
AttrString (innerHTML) + Event
$('<span id="foo2" title="Foo 2">Text</span>').click(myFunction);
ready
AttrObject (createElement)
$('<span></span>').attr({
 id: 'foo3',
 title: 'Foo 3'
}).text('Text');
ready
AttrObject (createElement) + Event
$('<span></span>').attr({
 id: 'foo4',
 title: 'Foo 4'
}).text('Text').click(myFunction);
ready
props (createElement)
$('<span></span>', {
 id: 'foo5',
 title: 'Foo 5',
 text: 'Text'
});
ready
props (createElement) + Event
$('<span></span>', {
 id: 'foo6',
 title: 'Foo 6',
 text: 'Text',
 click: myFunction
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Krinkle on