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

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