jQuery.html() vs jQuery.append() vs jQuery.prepend() (v9)

Revision 9 of this benchmark created on

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//zeptojs.com/zepto.min.js"></script>
<script src="//rawgithub.com/dameleon/tt.js/master/tt.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>';
    
    var array = ['<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>'].join('');

Teardown


    $('#test-wrapper').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery html string
jQuery('#test-wrapper').html(string);
ready
jQuery html array
jQuery('#test-wrapper').html(array);
ready
jQuery append string
$('#test-wrapper').append(string);
ready
jQuery append array
$('#test-wrapper').append(array);
ready
innerHTML string
document.getElementById("test-wrapper").innerHTML = string;
ready
innerHTML array
document.getElementById("test-wrapper").innerHTML = array;
ready
insertAdjacentHTML string
document.getElementById("test-wrapper").insertAdjacentHTML('beforeend', string);
ready
insertAdjacentHTML array
document.getElementById("test-wrapper").insertAdjacentHTML('beforeend', array);
ready
Zepto append string
Zepto('#test-wrapper').html(string);
ready
Zepto append array
Zepto('#test-wrapper').html(array);
ready
tt append string
tt('#test-wrapper').html(string);
ready
tt append array
tt('#test-wrapper').html(array);
ready

Revisions

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