Appending an array of jQuery objects to another jQuery node

Question

In version 1.3.2 of jQuery, the following works:

$('<span/>').append(
  $([
    $('<span/>').append(
      $('<a>').attr('href', 'http://google.com').text('Google')
    ),
    $('<span/>').text('Foo')
  ])
)

It seems that in jQuery 1.4.2, the $([...]) fails silently. I need this code to be compatible with both versions of jQuery since our unit tests are forced to run 1.3.2, but the main application uses jQuery 1.4.2. Any ideas?

Answer 1

Try using .get(0) to grab the actual element to be added to the array. Seems to work:

Try it out: http://jsfiddle.net/TFY22/

(You can switch the jQuery version on the left in jsFiddle, then click Run at the top.)

var test = $('<span/>').append(
  $([
    $('<span/>').append(
      $('<a>').attr('href', 'http://google.com').text('foo')
    ).get(0),  // Get DOM element
    $('<span/>').text('Google').get(0)// Get DOM element
  ])
);

$('body').append(test);

---

EDIT: With regard to the comments below, there are simpler approaches.

This will create the entire structure at once.

$('<span><span><a href="http://google.com"&gt;foo&lt;/a&gt;&lt;/span&gt;&lt;span&gt;Google&lt;/span&gt;&lt;/span&gt;');

If you have any dynamic data to include, you can concatenate it in, just be aware that there are security concerns if the source of the data is unknown.

http://jsfiddle.net/TFY22/1/

var text = 'foo';

$('<span><span><a href="http://google.com"&gt;' + text + 
                                 '</a></span><span>Google</span></span>');

Or take a more verbose approach, and create each element separately, and append:

http://jsfiddle.net/TFY22/2/

var $top = $('<span/>');
var $a = $('<a/>').attr('href','http://google.com').text('foo');

$('<span/>').append($a).appendTo($top);
$('<span/>').text('Google').appendTo($top);

Or chain your .append() calls to give a structured appearance:

http://jsfiddle.net/TFY22/4/

var test = $('<span/>')
    .append($('<span/>')
            .append($('<a>').attr('href', 'http://google.com').text('foo'))
           )
    .append($('<span/>').text('Google'));

$('body').append(test);​