jQuery append() - 返回附加元素

Posted 2023-05-09

【中文标题】jQuery append() - 返回附加元素

【英文标题】：jQuery append() - return appended elements

【发布时间】：2011-01-10 16:33:05

【问题描述】：

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

所以我想这样做：

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

【问题讨论】：

Easier way to get a jQuery object from appended element的可能重复

【参考方案1】：

有一种更简单的方法：

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

首先使用jQuery(html [, ownerDocument ]) 创建newHtml，然后使用appendTo(target)（注意“To”位）将其添加到#mydiv 的末尾，从而扭转局面。

因为您现在开始以$(newHtml) appendTo('#myDiv') 的最终结果是新的 html 位，.effects(...) 调用将在那个 new还有一点html。

【讨论】：

使用 jQuery UI 版本 1.9.2 我得到 effects 不是函数...但 effectis

我要补充一点，还有另一个签名：appendTo(target, context)。例如对于任何 jQuery 选择器，它允许搜索 target ，但仅在特定上下文中。如果您编写插件或库，它会非常有用。

如果 newHtml 不是有效的 HTML 或有效的 jQuery 选择器，这将引发错误：$('/ This is Not HTML /').appendTo('#myDiv') 导致 Uncaught Error: Syntax error, unrecognized expression 而$('#myDiv').append('/ This is Not HTML /') 通过将文本附加到目标元素可以正常工作。

【参考方案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);

【讨论】：

当我后来尝试将事件绑定到附加元素时，这对我不起作用。我使用了 var appendedTarget = $(newHtml).appendTo(element)。然后我可以使用 $(appendedTarget).bind('keydown',someFunc)

进行绑定

我认为是$elements.effect("highlight", , 2000);，而不是effects。

这不起作用，因为 $elements 变量在被追加后发生变化并且不再可用。

@AlexV 这似乎有效，请参阅jsbin.com/xivedohofi/1/edit?html,js,output 上的现场演示，还可以查看与接受类似问题***.com/questions/1443233/… 相同的答案

看来他们已经在较新版本的 jQuery 中修复了这个问题。

【参考方案3】：

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

【参考方案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]"

【讨论】：

append() 返回的元素是容器，而不是新元素。

【参考方案5】：

我认为你可以这样做：

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

父#parentId 是从追加中返回的，因此添加一个jquery 子查询以获取插入的最后一个div 子。

$child 是添加的 jquery 包装的子 div。