jQuery append vs html vs innerHTML list performance (v46)

Revision 46 of this benchmark created on

Description

Just a simple example showing the speed difference between populating a list with .append() & .html() and innerHTML

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="divHeader">
</div>

Setup

var len = 20;

Test runner

Ready to run.

Testing in
TestOps/sec
jquery .append()
$(function() {
  $("#divHeader").append(
    "<div id='divLogo'>" +
    "<img src='images/logo.jpg' alt='B.K.K.(1985) PUBLIC COMPANY LIMITED' />" +
    "</div>" +
    "<div id='divLanguage'>" +
    "<p class='language'>" +
    "<a href='index_th.html'>ไทย | </a><a href='index.html'>Eng</a>" +
    "</p>" +
    "</div>" +
    "<hr id='hrDropdownBar' />"
  )
});
ready
jQuery .html()
$(function() {
  $("#divHeader").html(
    '<div id="divLogo">' +
    '<img src="images/logo.jpg" alt="B.K.K.(1985) PUBLIC COMPANY LIMITED" />' +
    '</div>' +
    '<div id="divLanguage">' +
    '<p class="language">' +
    '<a href="index_th.html">ไทย | </a><a href="index.html">Eng</a>' +
    '</p>' +
    '</div>' +
    '<hr id="hrDropdownBar" />'
  )
});
ready
javascript innerHTML
 
ready

Revisions

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