jquery string += vs .append (with loop) (v5)

Revision 5 of this benchmark created by Adam on

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js">
</script>
<div id="funtimes" style="height: 400px; overflow:auto;">
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
string in loop (append after)
var html = "<li><span>This is an initial list item</span>",
    div = $("#funtimes");

for (i = 0, l = 2000; i < l; i++) {
  html += "<li><span>This is list item" + (i + 1) + "</span>";
}

div.append(html);
ready
append in loop
var html = "<li><span>This is an initial list item</span>",
    div = $("#funtimes");

for (i = 0, l = 2000; i < l; i++) {
  div.append("<li><span>This is list item" + (i + 1) + "</span>");
}
ready
string in loop (html after)
var html = "<li><span>This is an initial list item</span>",
    div = $("#funtimes");

for (i = 0, l = 2000; i < l; i++) {
  html += "<li><span>This is list item" + (i + 1) + "</span>";
}

div.html(html);
ready

Revisions

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