jQuery append () - devuelve elementos agregados

188

Estoy usando jQuery.append () para agregar algunos elementos dinámicamente. ¿Hay alguna forma de obtener una colección jQuery o una matriz de estos elementos recién insertados?

Entonces quiero hacer esto:

$("#myDiv").append(newHtml);
var newElementsAppended = // answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);

jquery

— psicotik
fuente

44

posible duplicado de la forma más fácil de obtener un objeto jQuery del elemento adjunto

— azulado

263

Hay una manera más simple de hacer esto:

$(newHtml).appendTo('#myDiv').effects(...);

Esto cambia las cosas creando primero newHtmlcon jQuery(html [, ownerDocument ]), y luego usando appendTo(target)(observe el Tobit " ") para agregarlo al final de #mydiv.

Porque ahora comienza con $(newHtml)el resultado final de appendTo('#myDiv')ese nuevo bit de html, y la .effects(...)llamada también estará en ese nuevo bit de html.

— SLaks
fuente

2

Usar jQuery UI versión 1.9.2 que obtengo no effectses una función ... pero sí lo effectes

— Philipp M

Agregaría que también hay otra firma: appendTo (target, context). Como para cualquier selector jQuery, permite buscar el objetivo, PERO solo dentro de un contexto específico. Puede ser muy útil si escribe complementos o bibliotecas.

— Pierpaolo Cira

1

Esto arrojará un error si newHtmlno es HTML válido o un selector jQuery válido: $('/ This is Not HTML /').appendTo('#myDiv')resulta Uncaught Error: Syntax error, unrecognized expressionmientras $('#myDiv').append('/ This is Not HTML /')funciona correctamente agregando texto al elemento de destino.

— Thomas CG de Vilhena

41

// wrap it in jQuery, now it's a collection
var $elements = $(someHTML);

// append to the DOM
$("#myDiv").append($elements);

// do stuff, using the initial reference
$elements.effects("highlight", {}, 2000);

— karim79
fuente

2

Esto no funcionó para mí cuando más tarde intenté vincular un evento al elemento adjunto. Usé var appendedTarget = $ (newHtml) .appendTo (elemento). Entonces podría vincular usando $ (appendedTarget) .bind ('keydown', someFunc)

— Zac Imboden

Creo que lo es $elements.effect("highlight", {}, 2000);, no effects.

— por qué el

2

Esto no funciona porque la variable $ elements después de ser agregada, cambia y ya no está disponible.

— Alex V

@AlexV Esto parece funcionar, vea la demostración en vivo en jsbin.com/xivedohofi/1/edit?html,js,output , también vea la misma respuesta aceptada para la pregunta similar stackoverflow.com/questions/1443233/…

— Adrien Be

2

Parece que han solucionado esto en versiones más recientes de jQuery.

— Alex V

30

var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);

— Thiago Belem
fuente

10

Un pequeño recordatorio , cuando se añaden elementos dinámicamente, funciones como append(), appendTo(), prepend()o prependTo()devolver un objeto jQuery, no el elemento HTML DOM.

MANIFESTACIÓN

var container=$("div.container").get(0),
    htmlA="<div class=children>A</div>",
    htmlB="<div class=children>B</div>";

// jQuery object
alert( $(container).append(htmlA) ); // outputs "[object Object]"

// HTML DOM element
alert( $(container).append(htmlB).get(0) ); // outputs "[object HTMLDivElement]"

— Esencia sin edad
fuente

19

El elemento devuelto por append () es el contenedor y no el nuevo elemento.

— Tomás

0

Creo que podrías hacer algo como esto:

var $child = $("#parentId").append("<div></div>").children("div:last-child");

El padre #parentId se devuelve desde el anexo, así que agregue una consulta jquery children para obtener el último hijo div insertado.

$ child es entonces el div jquery wrap child que se agregó.

— aff
fuente