Cách dễ dàng hơn để lấy một đối tượng jQuery từ phần tử được nối thêm

Có cách nào dễ dàng hơn / nhanh hơn để thêm phần tử bằng cách sử dụng jQuery append không:

Cách lấy phần tử $ selectors:

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

Tôi đã thử:

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

nhưng điều đó làm cho $ selectors = $ container

Có lẽ đó là cách nhanh nhất / tốt nhất. Chỉ cần kiểm tra.

Tại sao không chỉ:

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

?

Sau đó, bạn có quyền truy cập vào 'el'.

Đây là cách làm yêu thích của tôi:

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

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

Bạn cũng có thể tạo một hàm jQuery mới để làm điều đó:

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

và sau đó sử dụng nó như vậy:

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

tất nhiên nếu bạn muốn thêm nhiều hơn một mục:

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

Ưu điểm của cách tiếp cận như thế này là sau này bạn có thể thêm nhiều hơn vào chức năng "addChild" nếu bạn muốn. Lưu ý rằng đối với cả hai ví dụ trên, bạn cần thêm phần tử vào tài liệu, do đó, một ví dụ đầy đủ có thể là:

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