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);
This question is related to
jquery
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.
A little reminder, when elements are added dynamically, functions like append()
, appendTo()
, prepend()
or prependTo()
return a jQuery object, not the HTML DOM element.
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]"
// 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);
var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);
Source: Stackoverflow.com