jQuery append to jQuery variable instead of DOM element

Question

Is it possible to append to jQuery variable?

someting like this $($tnail).appendTo($collection);

I need to optimize costly DOM modifications and want to do it all at once.

something like this:

    var $collection;

 $.each(items, function (i, item) {

        var $tnail = $("<div></div>");

        $($tnail).appendTo($collection);

    });

    $($collection).appendTo("#Container");

In your code $collection should be a jQuery object.

Ram
– Ram

2013-03-27 18:02:39 +00:00
Commented Mar 27, 2013 at 18:02 — Ram
– Ram, Commented Mar 27, 2013 at 18:02
If you really want to optimize, you'll do this !

adeneo
– adeneo

2013-03-27 18:18:44 +00:00
Commented Mar 27, 2013 at 18:18 — adeneo
– adeneo, Commented Mar 27, 2013 at 18:18

Barney · Accepted Answer · 2013-03-27 18:30:03Z

1

Yes! You just need to make sure $collection is a jQuery object:

var $collection = $('<x/>');

$.each(items, function (i, item) {

    var $tnail = $("<div></div>");

    $tnail.appendTo($collection);

});

$($collection.html()).appendTo("#Container");

You've also got 2 bits where you wrap a jQuery object in a new jQuery call: $tnail is already a jQuery wrapped div, so it already has the appendTo method. Even more performance benefits!

EDIT: As Kevin points out, you can't append to an empty jQuery object. Internally, jQuery uses empty document fragments, but it doesn't expose this through it's API. So I've change my solution to create a dummy element, and then only append its contents to #Container.

edited Mar 27, 2013 at 18:30

answered Mar 27, 2013 at 18:04

Barney

16.5k5 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user400654 Over a year ago

I'm not sure what the result of this code will be, $collection doesn't contain any elements for $tnail to be appended to. I'd expect it to do nothing

user400654 · Accepted Answer · 2013-03-27 18:07:32Z

1

You don't actually want to append the elements to $collection, you want to add them to it.

var $collection = $(); // must be a jquery object
$.each(items, function (i, item) {

    var $tnail = $("<div></div>");

    // add to collection
    $collection.add($tnail);

});

answered Mar 27, 2013 at 18:07

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

jQuery append to jQuery variable instead of DOM element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related