jQuery cloneTo 而不是 appendTo？

Posted 2023-02-22

【中文标题】jQuery cloneTo 而不是 appendTo？

【英文标题】：jQuery cloneTo instead of appendTo?

【发布时间】：2010-11-14 21:55:39

【问题描述】：

我正在尝试使用 jquery appendTo 将元素复制到另一个容器中。 该对象确实已附加，但已从源中删除。 有没有办法可以追加元素，同时将源元素留在原处？ 称它为副本 称它为克隆 随便你怎么称呼它。

这是我当前的代码：

jQuery(document).ready(function()

    jQuery('#button').appendTo('#panel'); //button should appear ALSO in panel.
);

【问题讨论】：

到了这里，发现我真的在寻找 detach() 而不是 clone。 detach 从 DOM 中删除该项目，但保留数据绑定，因此当您在其他地方 append 元素时，事件处理程序仍然可以工作。 api.jquery.com/detach

【参考方案1】：

接近，但不够接近。下面的代码将clone()元素添加到#panel中。

jQuery(document).ready(function()

    jQuery('#button').clone().appendTo('#panel');
);

请注意，在同一页面中使用两次 ID 是违反标准的。所以，要解决这个问题：

jQuery(document).ready(function()

    jQuery('#button').clone().attr('id', 'newbutton').appendTo('#panel');
);

【参考方案2】：

在添加之前，只需在您选择的 jQuery 对象上调用clone() 方法：

$('#button').clone().appendTo('#panel');

如果您还需要克隆附加到选定元素的所有事件处理程序，请将布尔值 true 作为参数传递给 clone() 方法。

此外，您可能需要更改所选元素的id 属性... 这很简单：

$('#button').clone().attr('id', 'button-clone').appendTo('#panel');

【参考方案3】：

您需要运行的代码是：

jQuery(document).ready(function()

    jQuery('#button').clone().appendTo('#panel'); //button should appear ALSO in panel.
);

它的作用是从 DOM 中获取节点，然后在内存中对其进行克隆。然后，该行获取这个新对象 (jQuery('#button').clone())，然后将其附加回 DOM 中的 #panel。这通常总是一个好的策略：尝试通过尽可能少地接触 DOM 来进行 DOM 操作。您可以对节点和元素进行大量操作，而无需在最后插入或附加它们。

【讨论】：

我知道这确实很旧，但由于 ID 被重复会产生无效的 html，因此不得不投反对票。即***.com/a/25493852/125981