jQuery append () - zwraca dołączone elementy

188

Używam jQuery.append (), aby dynamicznie dodawać niektóre elementy. Czy jest jakiś sposób na uzyskanie kolekcji jQuery lub tablicy tych nowo wstawianych elementów?

Więc chcę to zrobić:

$("#myDiv").append(newHtml);
var newElementsAppended = // answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);
jquery psychotik
źródło
4
możliwy duplikat łatwiejszego sposobu uzyskania obiektu jQuery z dołączonego elementu
niebieskawy

Odpowiedzi:

263

Jest na to prostszy sposób:

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

Odwraca to wszystko, najpierw tworząc za newHtmlpomocą jQuery(html [, ownerDocument ]), a następnie używając appendTo(target)(zwróć uwagę na Tobit „ ”), aby dodać go na końcu #mydiv.

Bo teraz zacząć z $(newHtml)wynikiem końcowym appendTo('#myDiv')jest to, że nowy kawałek html, a .effects(...)rozmowa będzie w tym nowym kawałku html zbyt.

SLaks
źródło
2
Używanie jQuery UI w wersji 1.9.2 otrzymuję effectsnie jest funkcją ... ale effectjest
Philipp M
Dodałbym, że jest jeszcze jedna sygnatura: appendTo (cel, kontekst). Tak jak w przypadku każdego selektora jQuery pozwala on na wyszukiwanie celu, ALE tylko w określonym kontekście. Może to być bardzo przydatne, jeśli piszesz wtyczki lub biblioteki.
Pierpaolo Cira
1
Spowoduje to błąd, jeśli newHtmlnie jest prawidłowym kodem HTML lub prawidłowym selektorem jQuery: $('/ This is Not HTML /').appendTo('#myDiv')powoduje, że Uncaught Error: Syntax error, unrecognized expressionwhile $('#myDiv').append('/ This is Not HTML /')działa poprawnie, dodając tekst do elementu docelowego.
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
źródło
2
Nie działało to dla mnie, gdy później próbowałem powiązać zdarzenie z dołączonym elementem. Użyłem var appendedTarget = $ (newHtml) .appendTo (element). Mógłbym wtedy powiązać za pomocą $ (appendedTarget) .bind ('keydown', someFunc)
Zac Imboden
Myślę, że tak $elements.effect("highlight", {}, 2000);nie jest effects.
dlaczego
2
To nie działa, ponieważ zmienna $ elements po dołączeniu zmienia się i nie jest już dostępna.
Alex V
@AlexV Wydaje się, że to działa, zobacz demo na żywo na jsbin.com/xivedohofi/1/edit?html,js,output , a także zobacz tę samą odpowiedź, która została zaakceptowana dla podobnego pytania stackoverflow.com/questions/1443233/...
Adrien Be
2
Wygląda na to, że naprawili to w nowszych wersjach jQuery.
Alex V
30 
var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);
Thiago Belem
źródło
10

Małe przypomnienie , gdy elementy są dodawane dynamicznie funkcje, takie jak append(), appendTo(), prepend()i prependTo()zwraca obiekt jQuery, a nie elementu DOM HTML.

PRÓBNY

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
źródło
19
Zwrócony element z append () jest kontenerem, a nie nowym elementem.
Tomas
0

Myślę, że możesz zrobić coś takiego:

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

Nadrzędny #parentId jest zwracany z append, więc dodaj do niego zapytanie potomne jquery, aby wstawić ostatnie dziecko div.

$ child jest wówczas dodanym div dziecka owiniętym jquery.

aff
źródło