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

Antworten:

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