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

Revision 5 of this benchmark created 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 ?

Update: included jQuery 1.6 tests

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>window.jQ14 = jQuery.noConflict( true ); </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>window.jQ15 = jQuery.noConflict( true ); </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>window.jQ16 = jQuery.noConflict( true ); </script>
<script>
  function myFunction() {
   alert("Clicked");
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
AttrString (jQuery 1.4; innerHTML)
jQ14('<span id="foo1" title="Foo 1">Text</span>');
ready
AttrString (jQuery 1.4; innerHTML) + Event
jQ14('<span id="foo2" title="Foo 2">Text</span>').click(myFunction);
ready
AttrObject (jQuery 1.4; createElement)
jQ14('<span></span>').attr({
 id: 'foo3',
 title: 'Foo 3'
}).text('Text');
ready
AttrObject (jQuery 1.4; createElement) + Event
jQ14('<span></span>').attr({
 id: 'foo3',
 title: 'Foo 3'
}).text('Text').click(myFunction);
ready
props (jQuery 1.5; createElement)
jQ15('<span></span>', {
 id: 'foo3',
 title: 'Foo 3',
 text: 'Text'
});
ready
props (jQuery 1.5; createElement) + Event
jQ15('<span></span>', {
 id: 'foo3',
 title: 'Foo 3',
 text: 'Text',
 click: myFunction
});
ready
props (jQuery 1.6; createElement) + Event
jQ16('<span></span>', {
 id: 'foo3',
 title: 'Foo 3',
 text: 'Text',
 click: myFunction
});
ready
createElement with properties
jQ16(document.createElement('span'), {
 id: 'foo3',
 title: 'Foo 3',
 text: 'Text',
 click: myFunction
});
ready
JQuery 1.4 createElement with Attr
jQ14(document.createElement('span')).attr({
 id: 'foo4',
 title: 'Foo 4',
 text: 'Text',
 click: myFunction
});
ready

Revisions

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