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

JavaScript performance comparison

Test case created by Yutaka Yamaguchi on 16th January 2013

same test as http://jsperf.com/innerhtml-vs-addattribute-later with jQuery 1.9

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

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'));`	pending…
test4 + wrap in a Jquery obj	`var div = document.createElement('div'); div.setAttribute('class','foobar'); 'textContent' in div ? div.textContent = 'foobar' : div.appendChild(document.createTextNode('foobar')); var $div = $(div);`	pending…