我怎样才能得到所有div的内容并将它们附加到另一个div？

Question

我有2个div。

div1和div2。我想从div1获取所有内容并将它们附加到div2然后fadeOut div1。

我试过了：

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

或

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

和

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

但似乎没有一个对我有用。

我做错了什么？

Answer 1

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

改为使用.contents() ^[docs]：

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

或者如果您想复制内容：

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

---

使用方法时阅读文档总是有帮助的。 E.g。

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

会将字符串#div2附加到ID为div1的元素。文档说：

  

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

和

  

content ：要在匹配元素集中的每个元素末尾插入的DOM元素，HTML字符串或jQuery对象。

类似于$('#div1').html('#div2');：

  

htmlString ：要设置为每个匹配元素内容的HTML字符串。

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

另一方面

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

会将ID为div1的元素附加到ID为div2的元素：

  

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

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

Answer 2

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

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

这是working example。

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

另请注意，fadeOut只隐藏元素（它设置display:none），并且不会将其从DOM中删除。我不确定这是不是你想要的。

Answer 3

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

应该有用。

Answer 4

这是一个小例子，您可以将其放在HTML

的文本下面

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

以及下面的脚本

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

Answer 5

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