jQuery append vs html vs innerHTML list performance

JavaScript performance comparison

Revision 20 of this test case created


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

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
<div id="list">
Benchmark.prototype.setup = function() {
    var len = 20;

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery .append()
for (var i = 0; i < len; i++) {
  var html = '<div>Test ' + i + '</div>';
jQuery .html()
var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';

javascript innerHTML
var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';

Compare results of other browsers


You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:


Joey commented :

The two examples are coded to work differently, giving JQuery an unfair advantage.

The jQuery .html() example has an unfair advantage. The html variable is created outside of the loop in the JQuery example, then after a pure JavaScript loop adds items to the variable rather than the DOM, the contents of the html var are added to the DOM just once using JQuery .html().

For the JavaScript innerHTML example the JavaScript is adding to the DOM within the loop, which is much, much slower. It must access the DOM each time and add content to it, rather than adding to the DOM just once from a variable like the JQuery example.

Tom commented :

To do a proper comparison you should keep everything identical except for the exact thing that you are comparing. Here is a simple, more accurate performance comparison:


Comment form temporarily disabled.

Add a comment