jQuery DOM Manipulation

Benchmark created by François Cassin on

Description

A test to demonstrate the differences between three types of DOM Manipulation using jQuery. Described in http://24ways.org/2011/your-jquery-now-with-less-suck and in the comments.

Preparation HTML

<ul id=#imgList>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
  var imgList = jQuery("#imgList");
  var arr = ['http://farm7.staticflickr.com/6216/6240217938_aeed84634a_t.jpg', 'http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_t.jpg', 'http://farm7.staticflickr.com/6092/6330704947_dd7e1b453c_t.jpg', 'http://farm6.staticflickr.com/5015/5505775854_39d4e3a1fe_t.jpg', 'http://farm6.staticflickr.com/5213/5508784414_d2d84f9c92_t.jpg', 'http://farm3.staticflickr.com/2706/5840168826_486f364c6c_t.jpg', 'http://farm3.staticflickr.com/2317/5799936522_7a09e4df0c_t.jpg', 'http://farm6.staticflickr.com/5221/5605279583_bd276d9624_t.jpg', 'http://farm3.staticflickr.com/2570/4220856234_029e5b8348_t.jpg', 'http://farm1.staticflickr.com/19/163378752_a3e57e8c9a_t.jpg']
</script>

Teardown


    imgList.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
Append for each
$.each(arr, function(count, item) {
  var newImg = '<li><img src="' + item + '"></li>';
  $('#imgList').append(newImg);
});
ready
Append once
var tmp = '';
$.each(arr, function(count, item) {
  tmp += '<li><img src="' + item + '"></li>';
});
$('#imgList').append(tmp);
ready
Join an array
var tmp = []; 
$.each(arr, function(count, item) { tmp.push('<li><img src="' + item + '"></li>');
});
$('#imgList').append(tmp.join(""));
ready

Revisions

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