Easier way to get a jQuery object from appended element

Question

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.

Answer 1

Why not just:

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

?

Then you have access to 'el'.

Answer 2

This is my favourite way of doing it:

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

Answer 3

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

Answer 4

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>');