jQuery append() - return appended elements

Question

I'm using jQuery.append() to add some elements dynamically. Is there any way to get a jQuery collection or array of these newly inserted elements?

So I want to do this:

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

possible duplicate of [Easier way to get a jQuery object from appended element](http://stackoverflow.com/questions/1443233/easier-way-to-get-a-jquery-object-from-appended-element) — bluish, Jun 10 '13 at 13:03

score 274 · Accepted Answer · edited Feb 18 '15 at 15:33

274

There's a simpler way to do this:

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

This turns things around by first creating newHtml with jQuery(html [, ownerDocument ]), and then using appendTo(target) (note the "To" bit) to add that it to the end of #mydiv.

Because you now start with $(newHtml) the end result of appendTo('#myDiv') is that new bit of html, and the .effects(...) call will be on that new bit of html too.

edited Feb 18 '15 at 15:33

Jeroen

60,696
40
206
339

answered Jan 29 '10 at 01:49

SLaks

868,454
176
1,908
1,964

4

Using jQuery UI version 1.9.2 I'm getting `effects` is not a function... but `effect`is – Philipp M Mar 01 '13 at 08:57
I would add that there is also another signature: appendTo(target, context). Such as for any jQuery selector it allows to search for target , BUT only inside a specific context. It can be very useful if you write plugins or libraries. – Pierpaolo Cira Dec 22 '16 at 13:32
1

This will throw an error if `newHtml` is not valid HTML or a valid jQuery selector: `$('/ This is Not HTML /').appendTo('#myDiv')` results in `Uncaught Error: Syntax error, unrecognized expression` while `$('#myDiv').append('/ This is Not HTML /')` works properly by appending text to the target element. – Thomas C. G. de Vilhena Mar 13 '17 at 20:16

score 47 · Answer 2 · answered Jan 29 '10 at 01:56

47

// 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);

answered Jan 29 '10 at 01:56

karim79

339,989
67
413
406

2

This did not work for me when I later tried to bind an event to the appended element. I used var appendedTarget = $(newHtml).appendTo(element). I could then bind using $(appendedTarget).bind('keydown',someFunc) – Zac Imboden Jun 22 '12 at 19:12
I think it is `$elements.effect("highlight", {}, 2000);`, not `effects`. – why Mar 27 '13 at 12:44
2

This doesnt work because the $elements variable after being appended, changes and is no longer available. – Alex V Jan 07 '14 at 20:26
@AlexV This seems to work, see live demo on http://jsbin.com/xivedohofi/1/edit?html,js,output , also see the same answer as accepted for the similar question http://stackoverflow.com/questions/1443233/easier-way-to-get-a-jquery-object-from-appended-element – Adriano Oct 28 '14 at 08:32
2

It appears they have fixed this in newer versions of the jQuery. – Alex V Oct 28 '14 at 18:03

Thiago Belem · Answer 3 · 2010-01-29T01:57:07.867

33

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

edited Jan 29 '10 at 01:57

answered Jan 29 '10 at 01:49

Thiago Belem

7,732
5
43
64

score 10 · Answer 4 · edited Apr 27 '13 at 06:28

10

A little reminder, when elements are added dynamically, functions like append(), appendTo(), prepend() or prependTo() return a jQuery object, not the 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]"

edited Apr 27 '13 at 06:28

nhahtdh

55,989
15
126
162

answered Apr 27 '13 at 03:47

AgelessEssence

6,395
5
33
37

29

The returned element from append() is the container and not the new element. – Tomas Sep 22 '14 at 13:45

score 4 · Answer 5 · answered Sep 01 '17 at 20:57

4

I think you could do something like this:

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

The parent #parentId is returned from the append, so add a jquery children query to it to get the last div child inserted.

$child is then the jquery wrapped child div that was added.

answered Sep 01 '17 at 20:57

aff

41
3

Exactly what I needed ! – Silloky Jul 19 '23 at 05:47

jQuery append() - return appended elements

5 Answers5

Linked