$('<div class='foobar' ...>') vs $('<div>',{'class':'foobar'...}) with jquery 1.9

JavaScript performance comparison

Test case created by Yutaka Yamaguchi

Info

similar test at http://jsperf.com/innerhtml-vs-addattribute-later with jQuery 1.9

Preparation code

<script src="http://code.jquery.com/jquery-1.9.0.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
innerHtml
$('<div class="foobar">foobar</div>')
pending…
createElement and add attributes
$('<div>',{'class':'foobar','text':'foobar'})
pending…
createElement and add attributes with chain
$('<div>').addClass('foobar').text('foobar')
pending…
pure Javascript DOM operation
var div = document.createElement('div');
div.setAttribute('class','foobar');
'textContent' in div ? div.textContent = 'foobar' : div.appendChild(document.createTextNode('foobar'));
var $div = $(div);
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