jquery.html vs innerHTML (v33)

Revision 33 of this benchmark created on

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<div id="list" style="display:none"></div>

Setup

function createFragment(html) {
      var frag = document.createDocumentFragment();
      var doc = document.implementation.createHTMLDocument();
      doc.body.innerHTML = html;
    
      var children = doc.body.children;
      var childrenLength = children.length;
      var el = null;
      for (var i = 0; i < childrenLength; i += 1) {
        el = children[i];
        frag.appendChild(el);
      }
    
      doc = null;
      return frag;
    }

Teardown


    document.getElementById('list').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery#append()
var $list = $('#list');

for (var i = 0; i < 1000; i++) {
  $list.append('<div>Test ' + i + '</div>');
}
ready
innerHTML
var list = document.getElementById('list');

for (var i = 0; i < 1000; i++) {
    list.appendChild(createFragment('<div>Test ' + i + '</div>'));
}
ready

Revisions

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