jQuery.html() vs jQuery.append() vs innerHTML vs insertAdjacentHTML (v16)

Revision 16 of this benchmark created on

Description

checking how best to insert shy of a template

Preparation HTML

<script src="//code.jquery.com/jquery-git2.min.js"></script>
<script src="//zeptojs.com/zepto.min.js"></script>
<script src="//rawgit.com/HelpeR/FastJs/master/fast.min.js"></script>
<script src="//rawgit.com/dameleon/tt.js/master/tt.min.js"></script>
<script src="//rawgit.com/01org/appframework/master/appframework.min.js"></script>


<div id="test-wrapper"><span id="text">text</span></div>

Setup

var one = 'String Item 1';
    var two = 'String Item 2';
    var three = 'String Item 3';
    var four = 'String Item 4';
    var five = 'String Item 5';
    
    var string = '<div class="entry" id="' + one + '">' +
        '<a class="bookmark" href="' + two + '" title="' + three + '" >' +
                '<div class="imgwrapper"><div class="image" style="background-image:url(' + four + ')" /></div>' +
                '<table class="details">' +
                '<tr>' +
                '<td class="edit" title="Edit"><span class="foundicon-edit"></span></td>' +
                '<td class="title"><div>' + five + '</div></td>' +
                '<td class="remove" title="Remove"><div class="foundicon-remove"></div></td>' +
                '</tr>' +
                '</table>' +
                '</div>' +
        '</a>' +
    '</div>';

Teardown


    if (document.getElementById("test-wrapper").children.length >= 50) {
     $("#test-wrapper")[0].innerHTML = '';
     $("#test-wrapper")[0].innerText = null;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery append string
jQuery('#test-wrapper').append(string);
ready
innerHTML string
document.getElementById("test-wrapper").innerHTML += string;
ready
insertAdjacentHTML string
document.getElementById("test-wrapper").insertAdjacentHTML('beforeend', string);
ready
jQuery parsed string
var parsed_string = jQuery.parseHTML(string);
jQuery('#test-wrapper').append(parsed_string);
ready
Hybrid parsed string
var parsed_string = jQuery.parseHTML(string);
jQuery(document.getElementById('test-wrapper')).append(parsed_string);
ready
jQ + insertAdj
jQuery("#test-wrapper")[0].insertAdjacentHTML('beforeend', string);
ready
tt.js
tt("#test-wrapper").append(string);
ready
FastJs
f.append("#test-wrapper", string);
ready
AppFW
af("#test-wrapper").append(string);
ready
Zepto
Zepto("#test-wrapper").append(string);
ready

Revisions

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