Более простой способ получить объект jQuery из добавленного элемента

Question

Есть ли более простой / быстрый способ добавить элемент с помощью jQuery append:

Как получить элемент $selectors:

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

Я пытался:

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

но это делает $selectors = $container

Может быть, это самый быстрый и наилучший способ.Просто проверяю.

Answer 1

Почему бы просто не:

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

?

Тогда у вас будет доступ к "el".

Answer 2

Это мой любимый способ сделать это:

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

Answer 3

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

Answer 4

Вы также можете создать новую функцию jQuery, чтобы сделать это:

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

, а затем используйте его так:

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

конечно, если вы хотите добавить более одного элемента:

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

Преимущество таких подходов заключается в том, что в дальнейшем вы можете добавить больше к " addChild " Функция, если хотите. Обратите внимание, что для обоих приведенных выше примеров необходимо добавить элемент в документ, поэтому полный пример может быть следующим:

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