insertAdjacentHTML-vs-innerHTML-vs-appendChild (v14)

Revision 14 of this benchmark created on

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="counter" style="display: none;">
</div>

Setup

var elem = document.getElementById("counter");
    var $elem = $('#counter')
    var range = document.createRange();
    range.selectNode(document.body);
    var nodeString = '<span class="feline">meow im a cat</span>';

Teardown


    elem.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
insertAdjacentHTML x1000
if (elem.childElementCount > 1000) elem.innerHTML = '';
elem.insertAdjacentHTML('beforeend', nodeString);
ready
innerHTML x1000
if (elem.childElementCount > 1000) elem.innerHTML = '';
elem.innerHTML += nodeString;
ready
appendChild x1000
if (elem.childElementCount > 1000) elem.innerHTML = '';
elem.appendChild(range.createContextualFragment(nodeString));
ready
insertAdjacentHTML x100
if (elem.childElementCount > 100) elem.innerHTML = '';
elem.insertAdjacentHTML('beforeend', nodeString);
ready
innerHTML x100
if (elem.childElementCount > 100) elem.innerHTML = '';
elem.innerHTML += nodeString;
ready
appendChild x100
if (elem.childElementCount > 100) elem.innerHTML = '';
elem.appendChild(range.createContextualFragment(nodeString));
ready
jQuery.buildFragment x100
if (elem.childElementCount > 100) elem.innerHTML = '';
elem.appendChild($.buildFragment([nodeString], document, []))
ready
jQuery x100
if (elem.childElementCount > 100) elem.innerHTML = '';
$elem.append(nodeString)
ready

Revisions

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