How does one add arrays of elements to the DOM in jQuery?
<p>Coming to jQuery from a functional background, I am fond (perhaps unreasonably so) of elegant chains of functions. I often find myself dealing with arrays of elements, such as those that may result from $.map, and my ability to manipulate these arrays in the DOM seems quite limited. Here's some sample code that runs through the results of a Google search, rendering the result titles:</p>

<pre><code>var newResultsDiv = $('&lt;div id="results" /&gt;');
$.each(searcher.results, function() {
  newResultsDiv.append('&lt;p&gt;' + this.title);
});
$("#searchresults").append(newResultsDiv);
</code></pre>

<p>I find this excessively verbose. Ideally, I would do something along these lines instead:</p>

<pre><code>$.map(searcher.results, function(elem) {
  return $('&lt;p&gt;' + elem.title);
}).wrapAll('&lt;div id="results" /&gt;').appendTo('#searchresults');
</code></pre>

<p>I've tried this out, along with several variants using different forms of append and wrap. They all appear to be incapable of handling the plain-old-Javascript array that jQuery.map spits out. They're designed to work with jQuery's own set collection. At least, that's my guess, as messing around with these functions in the Firebug console seems to confirm the problem.</p>

<p>I am hoping that someone here has the wisdom to show me an elegant way to do what I'm trying to do. Is there one?</p>
