jQuery append() Techniques

Benchmark created by Jordan Thomas on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="container"></div>

Setup

$container = $('#container');
    
    $container.empty();
    
    var els = [];
    var $els = $();
    var string = '';
    
    for (var i = 0; i < 1000; i++) {
      $els.add(document.createElement('DIV'))
      els.push(document.createElement('DIV'));
      string += '<div></div>';
    }

Test runner

Ready to run.

Testing in
TestOps/sec
string
$container.append(string);
ready
array
$container.append(els);
ready
jQ object
$container.append($els);
ready
control
$.each(els, function(i, el) {
  $container.append(el);
});
ready

Revisions

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