Appending An Array Of jQuery Objects To The DOM

Posted October 7, 2011 at 10:42 AM by Ben Nadel

Tags: Javascript / DHTML

Reader Comments

I've always found that jQuery's

serves me better than a plugin would:

Usually, I'm creating the array and appending it to another element, so the

seems to match the general cases.

Of course, since I've learned how to use

, I'll admit that I'm probably biased towards making things work with

rather than try to work out another solution.

And wow, I guess I went a little overboard with the markup in the above comment. My apologies :-)

@Mike,

No worries - my Code tag assumes a block-level element. Something I've been meaning to fix for a while.

The issue, getting back to the code itself, though, is that I believe in my example, $(buffer) will also run into the same JavaScript issue. Essentially, any attempt to create a jQuery object from an array *of* jQuery objects seems to throw an error. That's why I needed to flatten all the DOM references into one array.

how about
// I am a convenience method for creating a Friend node
// with the given name (returned as a jQuery object).
function createFriendNode( name ){

// Create the friend node.
return(
$( "<li>" + name + "</li>" )[0];
//or $( "<li>" + name + "</li>" ).get(0);
);

}

// Create an array of friends.
var buffer = [];
buffer.push( createFriendNode( "Joanna" ) );
buffer.push( createFriendNode( "Lisa" ) );
buffer.push( createFriendNode( "Tricia" ) );
buffer.push( createFriendNode( "Kim" ) );

// Append the friends to the DOM.
$( "#jq-intro" ).append(buffer);

@Mahdi,

You could definitely do that. The only reason I shied away from that is that once I have an object wrapped in a jQuery container, I'd rather leave it there. This way, if I have to do further updates to it, I already have the jQuery API available.

That said, extracting the raw DOM node in the function would certainly do the trick.

yeah I agree, I could see using this nice plugin in larger projets not sure if $.map is faster than a regular for loop though!

@Mahdi,

Probably not. Every layer of abstraction adds some trade-off in performance. Something very satisfying about map() functions, though, at least for me :) I'm enjoying more functional programming concepts.

@Ben

thank you Ben I agree with you. I will add this plugin to my toolkit :)

// I am a convenience method for creating a Friend node
// with the given name (returned as a text).
function createFriendNode( name ){

// Create the friend node.
return "<li>" + name + "</li>";
}

// Create an array of friends.
var buffer = [];
buffer.push( createFriendNode( "Joanna" ) );
buffer.push( createFriendNode( "Lisa" ) );
buffer.push( createFriendNode( "Tricia" ) );
buffer.push( createFriendNode( "Kim" ) );

// Append the friends to the DOM.
$( "ul.friends" ).append( buffer.join(', ') );

@Daniel
what you have is wrong it will add an extra Comma(,).
this is how I can see this code works.

Really Interesting :)

@mahdi, Vous avez raison.

Également : $( "ul.friends" ).append( buffer.join("") );

J'étais parti de l'idée de l'opérateur "," : $( "ul.friends" ).append("<li>Joanna</li>","<li>Lisa</li>","<li>Tricia</li>","<li>Kim</li>");

In your email, this link http://www.bennadel.com/blog/2268-Appending-An-Array-Of-jQuery-Objects-To-The-DOM.htm?replyto=mahdi%20pedram#blogcommentform is broken (An error occurred.)

Interesting plugin,

One question though - why use an array as a holder, rather than a jQ object?

If you are going to be inserting one by one anyways, why not replace Buffer with an "off DOM" $(ul) ?
then you could just replace or reposition it into the page context as needed? Or if you need to maintain event bindings on the original element, just move the children?

(assuming you do the sorting either at backend, or need to support front end sorting of final jQ object anyways...)

You can use jQuery's each function like this:

to get the same results.

the fastest way of doing this is using document fragment.
so you don't need to add it an array.

but your code will be pure javascript

@Daniel,

Definitely, using a string buffer (array) is going to be the fastest way to build large portions of the DOM. However, with that speed comes a bit of a trade-off in that you no longer get to be able to leverage the jQuery API if you wanted to do things like attach data() or event bindings.

I'm not saying that's bad - just a trade-off.

Also, around 4AM (when you posted my time), my site typically gets poor performance (hence your error most likely). I think that is when I get indexed by spiders.

@Atleb,

That's a super interesting suggestion. I like it!

@JKirchartz,

Also a good suggestion; though, you could easily create a plugin from that so as to reduce the code (assuming you might re-use this approach in multiple places).

@Mahdi,

It's funny you mention Fragments; I tried to following the jQuery code that powers append()... it's really hard for me to follow... but, it looks like they are creating a fragment for you in order to increase speed. There are checks, in the library, to see if the object you passed in IS a fragment; and if it is not, it looks like it creates one explicitly.

But, like I said, I had a lot of trouble following the jQuery internals - they are so intensely compact!

Also, when I started this code, I did try using:

However, it seems that while that particular line works without error, any subsequent calls to fragment.append() will not actually add objects to the collection.

From the jQuery library code, I believe it checks the nodeType before executing the append. And, the fragment, which has nodeType = 11, fails the check and the append() is ignored.

@ben
I need to research more on how jquery deals with document fragments.

this Looks like a plugin to me :) I will try to write it later tonight.

Thanks alot

@Mahdi,

Sounds good to me. I always have trouble deducing what the jQuery code is doing. So, any light you can shed is much appreciated.

@Ben

I wrote a small plugin that deals with fragments.
apparently jquery doesn't support it. they found it more confusing so the append only accepts Element Nodes.

please take a look at this and let me know what you think.
this small plugin supports both jQuery Dom Objects and native javascript Dom Objects.
http://jsfiddle.net/RZfZ8/1/

Thank you.

@Mahdi,

It looks like jsFiddle is down for maintenance :) I'll have to check back later.

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	@mahdi, Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment