CODEWITHSUNDEEP
jquerycss-selectorsappend
slolife
slolife

Reputation: 19870

Easier way to get a jQuery object from appended element

Is there an easier/quicker way to get the element added using jQuery append:

How to get the $selectors element:

$container.append('<div class="selectors"></div>');
var $selectors = $('.selectors', $container);

I tried:

var $selectors = $container.append('<div class="selectors"></div>');

but that makes $selectors = $container

Maybe that's the quickest/best way. Just checking.

Upvotes: 89

Views: 67545

Answers (4)

Brad Parks
Brad Parks

Reputation: 71981

You could also create a new jQuery function to do it:

jQuery.fn.addChild = function(html) 
{                               
    var target  = $(this[0])                            
    var child = $(html);                                                      
    child.appendTo(target);                                                   
    return child;                                                             
};

and then use it like so:

$('<ul>').addChild('<li>hi</li>');

of course if you wanted to add more than one item:

var list = $('<ul>');
list.addChild('<li>item 1</li>');
list.addChild('<li>item 2</li>');

The advantage of approaches like this is that later on you can add more to the "addChild" function if you like. Note that for both the examples above, you need to add the element to the document, so a full example might be:

$('body').addChild('<ul>').addChild('<li>hi</li>');

Upvotes: 3

hobbs
hobbs

Reputation: 239861

$selectors = $('<div/>').addClass('selectors').appendTo($container);

Upvotes: 6

Magnar
Magnar

Reputation: 28810

This is my favourite way of doing it:

var $selectors = $('<div class="selectors"></div>').appendTo(container);

Upvotes: 66

cletus
cletus

Reputation: 625057

Why not just:

var el = $('<div class="selectors"></div>');
$container.append(el);

?

Then you have access to 'el'.

Upvotes: 175

Related Questions