我怎样才能得到所有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();

使用方法时阅读文档总是有帮助的.例如

$('#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

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

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

这是一个有效的例子.

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

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