完全剪切和粘贴元素答案

【问题标题】：Completely cut and paste an element完全剪切和粘贴元素
【发布时间】：2011-08-25 07:34:32
【问题描述】：

我是否可以使用 jQuery 从一个位置剪切（完全包含所有样式和属性）一个元素并将其粘贴到另一个位置（例如 body）？

另外，我想在旧位置放置一个字符串（或标签），因为我想在脚本末尾将其位置更改为旧位置。

我可以吗？怎么样？

【问题讨论】：

我从来没有听说过这样的事情，但可能会为复制命令创建一个事件处理程序，（谷歌上有很多示例，然后只需删除内部 html，您将不得不将内部 html 代码保存在某处首先，在粘贴之前。可能在xml或其他方法中。可能只有在选择粘贴时才能剪切对象，然后您可以在一个函数中完成所有操作。不要认为这是不可能的想法，这里是如何检测复制和粘贴事件mkyong.com/jquery/…
注意：交换 2 个相邻项目的优雅解决方案：stackoverflow.com/a/8638127/669677

【解决方案1】：

appendTo() 会自动将匹配的元素从它们当前的位置移动到指定的容器中，这似乎是你想要的。

您可以在移动元素之前使用after() 插入新内容：

$("#yourElement").after("<p>Element was there</p>").appendTo("body");

【讨论】：

+1 但如果 CSS 像这样应用，尽管 .someContainer #yourElement { color: blue; } 将其从容器中取出会“破坏”样式。所以可能会更复杂。
谢谢。我正在使用appendTo()，但我不知道它会移动元素。
@kikio，不幸的是，除非新容器也公开someContainer 类，否则样式确实会改变。据我所知，没有简单的方法来计算和重新应用原始样式。也许您可以更改 CSS 规则，以便无论其容器如何，适当的样式都将应用于元素？
是的，“我”可以，但我正在开发一个插件，也许我的用户不能

【解决方案2】：

.detach() 更适合此任务，正如@lvan 所建议的那样。

jQuery(jQuery("#yourElement").detach()).appendTo("body");

【讨论】：

【解决方案3】：

你可以通过克隆来做到这一点先复制到别的地方

$('#yourElement').clone().appendTo('#anotherDiv');

然后删除旧的，

 $('#parentOfOldElement #yourElement').remove();

或者你可以替换它以备后用

  $('#parentOfOldElement #yourElement').replaceWith('<div id="toReplaceAgain">/div>');

【讨论】：

【解决方案4】：

insertAfter() 和 insertBefore() 完全是剪切和粘贴方法。

【讨论】：

【解决方案5】：

除非或直到您没有克隆任何元素，否则所有运算符都会将所选元素从一个位置移动到另一个位置，例如： appendChild 、 appendTo 、 insertAfter 、 insertBefore 等等

【讨论】：