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

Posted 2023-05-09

【中文标题】jQuery 将 div 加载到另一个没有 .html() 方法的

【英文标题】：jQuery load div into another without .html() method

【发布时间】：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() 方法加载到食物中时，并没有隐藏按钮。相反，它会隐藏页面上的原始按钮，而不是复制的按钮。

我想要达到的目标：https://jsfiddle.net/o9kshscj/6/

【参考方案1】：

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

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

演示：Fiddle

【讨论】：

jQuery 文档没有提到任何关于能够将 jQuery 对象传递到 html() 的内容。出于兴趣，这是如何工作的？

@RGraham 在html 代码中你可以找到if ( elem ) this.empty().append( value );

@ArunPJohny 有趣！他们真的应该记录下来。不敢相信你已经记住了来源:)

@RGraham 我之前在某处看到它时也遇到过同样的问题。所以去源头搜索并找到了这个..现在我记得它我去了源头并复制了它跨度>

【参考方案2】：

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

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

【参考方案3】：

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

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