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

Revision 4 of this benchmark created by V-Light 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
my test
jQ16(document.createElement('span'), {
  id: 'foo3',
  title: 'Foo 3',
  text: 'Text',
  click: myFunction
});
ready
my test 2
jQ16('<span>', {
  id: 'foo3',
  title: 'Foo 3',
  text: 'Text',
  click: myFunction
});
ready

Revisions

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