jQuery element creation w/ Attributes (v21)

Revision 21 of this benchmark created by nick on

Description

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 HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery create1
$('<div id="id-a-' + $("[id^='id-a-']").length + '" class="class">some Text</div>').appendTo(document);
ready
jQuery create2
$('<div/>').attr({
  id: 'id-b-' + $("[id^='id-b-']").length
}).addClass('class').html('some Text').appendTo(document);
ready
jQuery create with document.createElement
$(document.createElement('div')).attr({
  id: 'id-c-' + $("[id^='id-c-']").length
}).addClass('class').html('some Text').appendTo(document);
ready
jQuery >= 1.4 create
$('<div/>', {
  id: 'id-d-' + $("[id^='id-d-']").length,
  'class': 'class',
  html: 'some Text'
}).appendTo(document);
ready
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);
ready

Revisions

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