jQuery 加载 div 到另一个没有 .html() 方法

Question

我有一个 div（我们称它为土豆），我想将它放在另一个 div（食物）中。执行此操作的典型方法是：

$("#food").html ( $("#potatoes").html());

然而这并没有达到我想要的效果。而不是使用实际的 "potatoes" div，jQuery 似乎是 copying 该内容到食物 div 中，其中原始内容仍然存在于浏览器中。

我希望 ACTUAL div（土豆）从原位消失并出现在容器 div（食物）中，而不必执行 perform .hide() ... 或类似操作方法。

为什么？我有选择器可以启用和禁用土豆 div 中的按钮，它们似乎会触发原始土豆 div 内容，但不会触发已加载到食物 div 中的副本。

这有意义吗？任何人都可以深入了解这是为什么以及我应该做什么吗？

旁注：

$(document).on('click','#button-loaded-with-page', {} ,function(e){
    this.disabled = true;
    $('#button-inside-potatoes-div').hide();
});

上面的示例是我想要实现的，但是当土豆内容已通过 .html() 方法加载到食物中时，不会隐藏按钮。相反，它隐藏了页面上的原始按钮，而不是重复的按钮。

Answer 1

您可以直接将对象传递给 html()

$("#a").html($("#b"));

演示：Fiddle

Answer 2

您可以使用 append 来更改 parent。这会将将 #potatoes object 从当前的 DOM 位置移动到 #food div 作为 child

$("#food").append($("#potatoes"));

Answer 3

您可以像这样替换后删除 div：

$("#a").html($("#b").html());
$("#b").remove();
$("#button-to-enable").prop("disabled", false);

jQuery load div into another without .html() method