title: jQuery appending an array of elements
body: <p>For the purpose of this question lets say we need to <code>append()</code> 1000 objects to the <code>body</code> element.</p>
  
  <p>You could go about it like this:</p>
  
  <pre><code>for(x = 0; x &lt; 1000; x++) {
      var element = $('&lt;div&gt;'+x+'&lt;/div&gt;');
      $('body').append(element);
  }
  </code></pre>
  
  <p>This works, however it seems inefficient to me as AFAIK this will cause 1000 document reflows. A better solution would be:</p>
  
  <pre><code>var elements = [];
  for(x = 0; x &lt; 1000; x++) {
      var element = $('&lt;div&gt;'+x+'&lt;/div&gt;');
      elements.push(element);
  }
  $('body').append(elements);
  </code></pre>
  
  <p>However this is not an ideal world and this throws an error <code>Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]</code>. I understand that <code>append()</code> can't handle arrays.</p>
  
  <p>How would I using <code>jQuery</code> (I know about the <a href="http://ejohn.org/blog/dom-documentfragments/">DocumentFragment</a> node, but assume I need to use other jQuery functions on the element such as <code>.css()</code>) add a bunch of objects to the DOM at once to improve performance?</p>