jQuery element creation w/ Attributes

JavaScript performance comparison

Revision 21 of this test case created by nick

Info

I liked http://jsperf.com/jquery-element-creationyay/6 but the last test wasn't equivalent as it was not creating a JQUERY instance of the new element.

This tests adds appending the new element to the DOM.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery create1
$('<div id="id-a-' + $("[id^='id-a-']").length + '" class="class">some Text</div>').appendTo(document);
pending…
jQuery create2
$('<div/>').attr({
  id: 'id-b-' + $("[id^='id-b-']").length
}).addClass('class').html('some Text').appendTo(document);
pending…
jQuery create with document.createElement
$(document.createElement('div')).attr({
  id: 'id-c-' + $("[id^='id-c-']").length
}).addClass('class').html('some Text').appendTo(document);
pending…
jQuery >= 1.4 create
$('<div/>', {
  id: 'id-d-' + $("[id^='id-d-']").length,
  'class': 'class',
  html: 'some Text'
}).appendTo(document);
pending…
create Element
var e = document.createElement('div');
e.id = 'id-e-' + $("[id^='id-e-']").length;
e.class = 'class';
e.innerHTML = 'some Text';

var $e = $(e);
$e.appendTo(document);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment