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

【问题标题】：jQuery load div into another without .html() methodjQuery 将 div 加载到另一个没有 .html() 方法的
【发布时间】：2015-05-23 14:32:36
【问题描述】：

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

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

但是，这并不能实现我想要的。 jQuery 似乎没有使用实际的“土豆” div，而是将该内容复制到 food div 中，而原始内容仍然存在于浏览器中。

我希望 ACTUAL div（土豆）从其位置消失并出现在容器 div（食物）中，而无需执行 .hide() ... 或类似方法。

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

这有意义吗？谁能解释一下为什么会这样以及我应该怎么做？

旁注：

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

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

【问题讨论】：

【解决方案1】：

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

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

演示：Fiddle

【讨论】：

【解决方案2】：

您可以使用append 更改父级。这会将#potatoes 对象从其当前的DOM 位置移动到#food div 作为一个孩子

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

【讨论】：

【解决方案3】：

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

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

【讨论】：