추가 된 요소에서 jQuery 객체를 가져 오는 더 쉬운 방법

jQuery append를 사용하여 요소를 추가하는 더 쉽고 빠른 방법이 있습니까?

$ selectors 요소를 얻는 방법 :

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

나는 시도했다 :

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

하지만 $ selectors = $ container가됩니다.

아마도 그게 가장 빠르고 좋은 방법 일 것입니다. 그냥 확인 중입니다.

왜 안 되는가 :

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

?

그런 다음 'el'에 액세스 할 수 있습니다.

이것이 제가 가장 좋아하는 방법입니다.

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

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

이를 위해 새 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>');