How to create a collection of jQuery elements and append them to the DOM?

Question

I'm looping over a list and need to create a jQuery Mobile radio button for each list element. All radio buttons should go inside a div class="radio-controls" which - once finished - are appended to the DOM.

Here is what I'm trying:

    var label = $("<label/>").attr("data-" + $.mobile.ns + "iconpos", "notext");
      barrel = [];

    for (var i = 0; i < myListitems.length; i += 1) {
      var item = myListitems[i];

      barrel.push(
          $("<input type='radio' name='radio-" + this.uuid + "' value='radio-" + this.uuid + "-" + i +"' />" )
            .wrap(label)
            .checkboxradio()
        );
      }
    }

After the loop I have an jQuery array, which I need to append.

But makeArray fails and returns

context is undefined

inside jQuery

 if ( ( context.ownerDocument || context ) !== document ) {

which is said to be caused by the array not consisting of elements selected from the document (mine are still not added to the DOM), while document.createFragement does not work, because I think I cannot add jQuery objects to a fragment. Doing this:

 var fragment = document.createDocumentFragment();

 // in my loop
 bullet = $("<input type='radio' name='radio-" + this.uuid + "' value='radio-" + this.uuid + "-" + i +"' />" )
     .wrap(label)
     .checkboxradio()
 fragment.appendChild( bullet );

 // after loop, add to document 
 fragment[o.bulletsPos === "top" ? prependTo : appendTo](el);

returns this error:

 Value does not implement interface Node.

Question: Is there a way to generate a collection of jQuery items and append this to the DOM? Of course I can insert every item one-by-one, but I want to create the whole thing dynamic and insert once.

Thanks for help!

Answer 1

Was able to get this to append with the following sample code:

var collection = [];
var elem;

for (var i = 0; i < 10; i+=1) {
    elem = $("<span />").attr("class","foo-"+i).text("hello");
    collection.push(elem);
}
console.log(collection);
// the "context" error
//$(collection).appendTo(document.body);
$(document.body).append(collection);

Fiddle demo: http://jsfiddle.net/558qq/3/