jquery.html vs innerHTML (v18)

Revision 18 of this benchmark created on

Preparation HTML

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

<div>
<div id="list" style="display:none"></div>
</div>

Setup

var html ='<span style="position: absolute;color:#000000;top:19px;left:97px;">п</span><span style="position: absolute;color:#CC0001;top:19px;left:111px;">о</span><span style="position: absolute;color:#000000;top:19px;left:125px;">чти</span>';

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.html()
$('#list').html(html);
ready
innerHTML
var list = document.getElementById('list');
list.innerHTML = html;
ready
replaceHTML
var list = document.getElementById('list');
var newEl = list.cloneNode(false);
newEl.innerHTML = html;
list.parentNode.replaceChild(newEl, list);

 
ready

Revisions

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