Manera más fácil de obtener un objeto jQuery del elemento agregado

Question 1

¿Existe una forma más fácil / rápida de agregar el elemento usando jQuery append?

Cómo obtener el elemento $ selectors:

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

Lo intenté:

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

pero eso hace $ selectores = $ contenedor

Quizás esa sea la mejor y más rápida forma. Solo revisando.

Question 2

Por qué no solo:

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

?

Entonces tienes acceso a 'el'.

Question 3

Esta es mi forma favorita de hacerlo:

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

Question 4

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

Question 5

También puede crear una nueva función jQuery para hacerlo:

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

y luego úsalo así:

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

por supuesto, si desea agregar más de un elemento:

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

La ventaja de enfoques como este es que más adelante puede agregar más a la función "addChild" si lo desea. Tenga en cuenta que para los dos ejemplos anteriores, debe agregar el elemento al documento, por lo que un ejemplo completo podría ser:

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

Answer 1

¿Existe una forma más fácil / rápida de agregar el elemento usando jQuery append?

Cómo obtener el elemento $ selectors:

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

Lo intenté:

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

pero eso hace $ selectores = $ contenedor

Quizás esa sea la mejor y más rápida forma. Solo revisando.

Answer 2

161

Por qué no solo:

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

?

Entonces tienes acceso a 'el'.

cletus
fuente

2

Hm. ¿Qué pasa si $containertiene varios elementos en este caso? En mi caso, quiero agregar algo a todas las instancias que coincida con un selector y obtener una colección de elementos creados.

Rhys van der Waerden

2

esto no funcionará en varias instancias de $container jsfiddle.net/onL028ty . Utilice appendTotruco en lugar jsfiddle.net/6nmdh84e

ktutnik

Answer 3

2

Hm. ¿Qué pasa si $containertiene varios elementos en este caso? En mi caso, quiero agregar algo a todas las instancias que coincida con un selector y obtener una colección de elementos creados.

Rhys van der Waerden

Answer 4

2

esto no funcionará en varias instancias de $container jsfiddle.net/onL028ty . Utilice appendTotruco en lugar jsfiddle.net/6nmdh84e

ktutnik

Answer 5

61

Esta es mi forma favorita de hacerlo:

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

Magnar
fuente

3

+1 - el mío también. Haga todo lo que necesita hacer con el elemento recién creado antes de agregarlo al DOM.

Russ Cam

Answer 6

3

+1 - el mío también. Haga todo lo que necesita hacer con el elemento recién creado antes de agregarlo al DOM.

Russ Cam

Answer 7

5

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

hobbs
fuente

1

Buena información, gracias. Es un poco detallado para mí en comparación con las otras respuestas, pero me pregunto si tiene un mejor rendimiento. El rendimiento no es un problema en mi situación particular, pero tal vez para otros.

slolife

Answer 8

1