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

Question

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

$ selectors 요소를 얻는 방법 :

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

나는 시도했다 :

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

그러나 $ selectors = $ 컨테이너가됩니다

아마도 그것은 가장 빠른/가장 좋은 방법 일 것입니다. 그냥 확인.

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