jQuery append () - Gibt angehängte Elemente zurück

188

Ich verwende jQuery.append () , um einige Elemente dynamisch hinzuzufügen. Gibt es eine Möglichkeit, eine jQuery-Sammlung oder ein Array dieser neu eingefügten Elemente abzurufen?

Also möchte ich das machen:

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

jquery

— Psychotik
quelle

4

Mögliches Duplikat der einfacheren Möglichkeit, ein jQuery-Objekt aus dem angehängten Element

— bläulich

263

Es gibt einen einfacheren Weg, dies zu tun:

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

Das macht die Dinge um , indem zuerst newHtmlmit jQuery(html [, ownerDocument ]), und dann unter Verwendung von appendTo(target)( man beachte den „ To“ Bit) , dass es bis Ende hinzuzufügen #mydiv.

Da Sie jetzt beginnen mit $(newHtml)dem Endergebnis appendTo('#myDiv')ist , dass neue bisschen html, und der .effects(...)Anruf auf dieser sein wird , neue bisschen html zu.

— SLaks
quelle

2

Mit jQuery UI Version 1.9.2 Ich erhalte effectskeine Funktion ... aber effectist

— Philipp M

Ich würde hinzufügen, dass es auch eine andere Signatur gibt: appendTo (Ziel, Kontext). Wie bei jedem jQuery-Selektor kann nach einem Ziel gesucht werden, ABER nur in einem bestimmten Kontext. Es kann sehr nützlich sein, wenn Sie Plugins oder Bibliotheken schreiben.

— Pierpaolo Cira

1

Dies wird einen Fehler aus , wenn newHtmlnicht gültig HTML oder ein gültiger jQuery - Selektor ist: $('/ This is Not HTML /').appendTo('#myDiv')Ergebnisse in Uncaught Error: Syntax error, unrecognized expressionwährend $('#myDiv').append('/ This is Not HTML /')funktionieren , indem Sie Text in das Zielelement anhängt.

— Thomas CG de Vilhena

40

// 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
quelle

2

Dies funktionierte bei mir nicht, als ich später versuchte, ein Ereignis an das angehängte Element zu binden. Ich habe var appendedTarget = $ (newHtml) .appendTo (Element) verwendet. Ich könnte dann mit $ (appendedTarget) .bind ('keydown', someFunc)

— Zac Imboden

Ich denke es ist $elements.effect("highlight", {}, 2000);nicht effects.

— Warum

2

Dies funktioniert nicht, da sich die Variable $ elements nach dem Anhängen ändert und nicht mehr verfügbar ist.

— Alex V

@AlexV Dies scheint zu funktionieren, siehe Live-Demo auf jsbin.com/xivedohofi/1/edit?html,js,output , siehe auch die gleiche Antwort wie für die ähnliche Frage gestapelt stackoverflow.com/questions/1443233/…

— Adrien Be

2

Es scheint, dass sie dies in neueren Versionen von jQuery behoben haben.

— Alex V

30

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

— Thiago Belem
quelle

10

Eine kleine Anzeige , wenn Elemente dynamisch hinzugefügt werden, Funktionen wie append(), appendTo(), prepend()oder prependTo()ein jQuery - Objekt zurückgeben, nicht das HTML - DOM - Element.

DEMO

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]"

— AgelessEssence
quelle

19

Das von append () zurückgegebene Element ist der Container und nicht das neue Element.

— Tomas

0

Ich denke, Sie könnten so etwas tun:

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

Die übergeordnete #parentId wird vom Anhang zurückgegeben. Fügen Sie daher eine Abfrage für jquery-Kinder hinzu, um das letzte eingefügte div-Kind einzufügen.

$ child ist dann das in jquery verpackte untergeordnete div, das hinzugefügt wurde.

— aff
quelle