javascript - jQuery：如何返回附加元素

Question

我使用 jQuery APIappend()添加一个新元素：

$(selector).append('<div class="test"></div>')

我希望表达式返回刚刚附加的元素以供我进一步使用，但是它返回$(selector). 那么，如何让 jQuery 返回刚刚添加的元素以避免重新选择它呢？

Answer 1

我相信这样做的方法是使用appendTo()

然后你可以做

$('<div class="test"></div>').appendTo(selector).css('background','blue');

或者你想做的任何事情。

这将导致div您刚刚附加的具有蓝色背景。

Answer 2

您可以只存储对它的引用。请记住，您应该先完成所有操作，$div然后再将其附加到作为一部分的元素DOM以避免多次重排。

var $div = $('<div class="test"></div>');

$(selector).append($div);

Answer 3

append您可以通过将 html 字符串传递给jQuery函数来独立创建元素：

$('<div class="test"></div>');

您可以在append

$(selector).append(/* $div = */$('<div class="test"></div>').… );

或与appendTo

/* $div = */$('<div class="test"></div>').appendTo(selector).… ;

或者你只是将它们分成两个语句。

Answer 4

这也可以。

<div class="inner">hellworld</div>
$('.inner').append('<p>paragraph</p>');

这将插入两个新的和一个现有的作为主体的最后三个子节点

var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('body').append($newdiv1, [newdiv2, existingdiv1]);

Answer 5

请试试这个

$(selector).append('<div class="test"></div>').find('div.test:last-child')

Answer 6

您可以通过添加childernjQuery 函数来返回它，如本示例jsfiddle

$(selector).append('<div class="test"></div>').children('.test');

或者您可以使用prependTO本示例jsfiddle中的 jQuery 函数：

$('<div class="test"></div>').prependTo(selector);

Answer 7

也许你可以尝试

var elt = $('<div class="test"></div>');
$(selector).append(elt);

或者使用 appendTo 而不是 append，然后链接您需要的任何内容（以下示例中的show() ）

$('<div class="test"></div>').appendTo($(selector)).show()