jquery vs createElement (v45)

Revision 45 of this benchmark created by marverix on

Preparation HTML

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

Setup

var parent = $(document.createElement('div'));

Test runner

Ready to run.

Testing in
TestOps/sec
jquery - append()
var test = parent.append("<div class='listElement' data-id='1'><span class='name'>Trololo</span><span class='actions'><span title='Remove role' class='removeRole' data-action='removeRole'></span></span></div>");
ready
jquery - html()
var test = parent.html("<div class='listElement' data-id='1'><span class='name'>Trololo</span><span class='actions'><span title='Remove role' class='removeRole' data-action='removeRole'></span></span></div>");
ready
createElement
var test = parent.append(
$(document.createElement('div')).addClass('listElement').attr('data-id', 1).append(
 $(document.createElement('span')).addClass('name').text('Trololo')
).append(
 $(document.createElement('span')).addClass('actions').append(
  $(document.createElement('span')).addClass('removeRole').attr({title:'Remove role','data-action':'removeRole'})
 )
));
ready

Revisions

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