innerHTML vs createRange

Benchmark created on

Preparation HTML

<div id="test"></div>
<script>
  var div = document.getElementById('test');
  var html = '<span>Hello</span>';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
createRange
var r = document.createRange();
r.selectNode(div);
r = r.createContextualFragment(html);
div.appendChild(r);
ready
innerHTML
div.innerHTML = html;
ready
innerHTML 2
div.innerHTML += html;
ready

Revisions

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