jquery string += vs .append

Benchmark created on

Preparation HTML

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

Test runner

Ready to run.

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

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

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

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

for (i = 0, l = 100; 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.