如何获取所有div的内容并将它们附加到另一个div？

Question

我有两个div。

分别是div1和div2。我想要获取div1中的所有内容并将其添加到div2中，然后淡出div1。

我尝试了以下代码：

$('#div1').append('#div2');
$('#div1').fadeOut();

或者

$('#div1').appendTo('#div2');
    $('#div1').fadeOut();

并且

$('#div1').html('#div2');
$('#div1').fadeOut();

但是似乎没有一个适合我。

我做错了什么？

- jQuerybeast

Answer 1

.html() 方法的问题在于它将DOM元素转换为HTML，反之亦然。这样会丢失所有与这些元素绑定的事件处理程序和数据。

应改用 .contents() ^[文档] 方法：

$("#div1").contents().appendTo('#div2').end().fadeOut();

或者如果你想复制内容：

$("#div1").clone(true, true).contents().appendTo('#div2');
$("#div1").fadeOut();

---

当你使用方法时，阅读文档总是很有帮助的。例如：

$('#div1').append('#div2');

将字符串#div2添加到ID为div1的元素中。文档说明如下：

将由参数指定的内容插入到匹配元素集合中每个元素的末尾。

以及

content: 要插入到匹配元素集合中每个元素末尾的DOM元素、HTML字符串或jQuery对象。

$('#div1').html('#div2');也是类似的：

htmlString: 作为每个匹配元素内容的HTML字符串。

它只会用字符串'#div2'替换#div1的内容。

另一方面

$('#div1').appendTo('#div2');

将具有ID div1的元素追加到具有ID div2的元素中：

将匹配元素集合中的每个元素插入到目标元素的末尾。

jQuery文档非常好，我建议阅读它。

- Felix Kling

---

这将实际上移动#div1的内容，而不仅仅是复制它，这可能没问题，但可能值得一提。这也意味着fadeOut可能看不到，因为元素的内容已经移动了。 - James Allardice

@James：问题只是提到从a到b获取内容。但是，我们也可以使用“copy”。 - Felix Kling

是的，我认为值得指出的是，虽然这种方法和“html”解决方案的可见结果可能相同，但生成的DOM将不同。然而，“contents”解决方案意味着“fadeOut”可能不可见，因为元素中没有剩余内容。 - James Allardice

@James：你说得非常正确，如果元素内没有内容，淡出它是没有意义的。不过，如果先克隆节点，那么应该可以正常工作。感谢您的建议！ - Felix Kling

Answer 2

您可以获取 #div1 的 HTML ，并将其附加到 #div2 中：

$("#div2").append($("#div1").html());
$('#div1').fadeOut();

这是一个工作示例。

请注意，这与您的第三个示例类似，但该示例无法正常工作，因为html方法接受一个字符串并将其附加到所选元素。在您的情况下，它只会附加字符串文字“#div2”。您需要实际从#div1获取要附加的HTML，并将其附加到目标元素中。

此外，请注意，fadeOut仅隐藏元素（它设置display:none），而不将其从DOM中删除。我不确定这是否符合您的要求。

- James Allardice

---

除非你想要替换 div2 的内容，否则你需要将 append 替换为 html。 - nikc.org

@nikc.org - 是的，虽然问题中说“将它们附加到div2”。 - James Allardice

Answer 3

$('#div2').html($('#div2').html());

应该可以工作。

- amiuhle

Answer 4

这是一个小例子，让您将以下文本作为HTML放置：

<div id="div1">
    <p>hi</p>
</div>
<div id="div2"></div>

以及以下脚本

$("#div2").append($("#div1").html());
$('#div1').fadeOut();

- Murtaza

Answer 5

content = $('#div1').html();
$('#div2').append(content);
$('#div1').fadeOut();

- sushil bharwani

---

如果我们使用 html()，我们将替换 div2 内部的内容。 - Murtaza