jQuery append() - 返回附加的元素

Question

我正在使用jQuery.append()动态添加一些元素.有没有办法获得这些新插入元素的jQuery集合或数组？

所以我想这样做:

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

Answer 1

有一种更简单的方法可以做到这一点:

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

这通过先创建newHtmlwith jQuery(html [, ownerDocument ]),然后使用appendTo(target)(注意" To"位)将其添加到结尾来解决问题#mydiv.

因为你现在开始使用$(newHtml)的最终结果appendTo('#myDiv')是HTML的新位,而.effects(...)通话将是对新的HTML有点太.

Answer 2

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

Answer 3

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

Answer 4

一个小的提醒,当元件被动态添加,功能,如append(),appendTo(),prepend()或prependTo()返回一个jQuery对象,而不是HTML DOM元素.

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]"