jQuery vs createElement (v262)

Revision 262 of this benchmark created on

Preparation HTML

<script src="//code.jquery.com/jquery-git2.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
test1
$('<div id="my-id" class="my-class">')
ready
test2
$('<div id="my-id" class="my-class"></div>')
ready
test3
var d=document.createElement('div');
d.id='my-id';
d.className='my-class';
$(d);
ready
test4
$(document.createElement('div')).attr('id','my-id').attr('class','my-class');
ready
test5
$(document.createElement('div')).prop('id','my-id').prop('class','my-class');
ready
test6
$(document.createElement('div')).prop({'id':'my-id', 'class': 'my-class'});
ready
test7
$('<div>').prop('id','my-id').prop('class','my-class');
ready
test8
$('<div>',{'id':'my-id','class':'my-class'})
ready
n1
$('<div class="entry" id="new_entry" title="Add New"><div><span class="foundicon-plus"></span></div></div>')
ready
n2
$('<div>').prop({"class": "entry", "id": "new_entry", "title": "Add New"}).append(
  $('<div>').append(
    $('<div>').prop("class", "entry")
  )
)
ready
n3
$('<div>').prop({"class": "entry", "id": "new_entry", "title": "Add New", "innerHTML": '<div><span class="foundicon-plus"></span></div>'})
ready
n4
$(document.createElement("div")).prop({"class": "entry", "id": "new_entry", "title": "Add New", "innerHTML": '<div><span class="foundicon-plus"></span></div>'})
ready
test 13
$(document.createElement('div')).prop({'class': 'my-class', 'id': 'my-id'})
ready
test 14
$(document.createElement('div')).addClass('my-class').prop('id', 'my-id')
ready

Revisions

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