dom manipulation with jquery (v5)

Revision 5 of this benchmark created by Hemant on

Description

appending nodes to DOM

Preparation HTML

<style>
  #wrapper > div{ display:none; }
</style>
<div id="wrapper">
  Dom Manipulation
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var domStr = "",
        domArr = [];
    
    $container = $("#wrapper");

Test runner

Ready to run.

Testing in
TestOps/sec
Bad1
var arr = [];
for (var i = 0; i < 100; i++) {
  arr.push(i);
}
$.each(arr, function(i, item) {
  $container.append("<div>" + item + "</div>");
});
ready
Bad2
var arr = [];
for (var i = 0; i < 100; i++) {
  arr.push(i);
}

$.each(arr, function(i, item) {
  domStr += "<div>" + item + "</div>";
});
$container.append(domStr);
ready
Bad3
var arr = [];
for (var i = 0; i < 100; i++) {
  arr.push(i);
}

$.each(arr, function(i, item) {
  domArr[i++] = "<div>";
  domArr[i++] = item;
  domArr[i++] = "</div>";
});

$container.append(domArr.join(""));
ready
Bad4
var arr = [];
for (var i = 0; i < 100; i++) {
  arr.push(i);
}

var arrLength = arr.length;
for (var i = 0; i < arrLength; i++) {
  domArr[i++] = "<div>";
  domArr[i++] = i;
  domArr[i++] = "</div>";
}

$container.append(domArr.join(""));
ready
Bad5
$.each(arr, function(i, item) {
  domStr += "<div>" + item + "</div>";
});
$container.append("<div>" + domStr + "</div>");
ready

Revisions

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