为什么对新创建的 jQuery 元素的多个“.appendTo”调用仅将其追加一次？

Question

I\xe2\x80\x99m 尝试将五个新列表项添加到无序列表的末尾#myList。我的方法是执行以下操作：

\n

const $newItem = $("<li>New Item</li>");\nconst $ul = $("#myList");\n\nfor(let i = 0; i < 5; ++i){\n  $newItem.appendTo($ul);\n}\n

\n

然而，这不起作用，因为它只将一个列表项插入列表中，而不是五个。

\n

在 R. Murphy\xe2\x80\x99s jQuery Fundamentals （在jQuery 基础知识部分的操作练习中）中，作者提供的解决方案与我的非常接近，唯一的区别是她没有\xe2\x80\x99t 存储变量中的新列表项，而是使用 HTML 字符串：

\n

const $ul = $("#myList");\n\nfor(let i = 0; i < 5; ++i){\n  $("<li>List item " + i + "</li>").appendTo($ul);\n}\n

\n

看来我的方法也应该有效，所以我\xe2\x80\x99m努力理解为什么它不起作用\xe2\x80\x99t。为什么是这样？

\n

Answer 1

li您的方法在循环外部创建一个元素，并尝试将相同的内容附加到ul五次。但由于您持有对单个 的引用li，因此每次追加它时，它实际上都会将其从原来的位置删除并重新添加到那里。

在解决方案中，li是在循环内创建的，因此li每次迭代它都是一个新元素。

您可以更改自己的方法以使用.clone() ^docs方法

for (var i=0;i<5;i++){
    $newItem.clone().appendTo($ul);
};

这样，它将创建一个副本，然后将其添加到ul.