如何将两个已有的div元素添加到指定container容器中？

嘿，这个问题我熟！你之前用$('.container').html($('.element1'))只能加单个元素，是因为html()方法在传入jQuery对象时，只会取集合里的第一个元素来替换容器内容～下面给你几种靠谱的解决方案，按需选就行：

方法1：用append()逐个或批量添加 #

append()是最常用的追加元素方法，它会把元素加到容器的末尾，而且支持一次性传入多个元素：

// 方式A：链式调用依次添加
$('.container').append($('.element1')).append($('.element2'));

// 方式B：一次性传入多个元素对象
$('.container').append($('.element1'), $('.element2'));

如果需要先清空容器里的原有内容，再添加新元素，可以加上.empty()：

$('.container').empty().append($('.element1'), $('.element2'));

方法2：用add()合并元素后再用html() #

如果习惯用html()来替换容器内容，可以先用add()把两个元素合并成一个jQuery集合，再传给html()：

$('.container').html($('.element1').add('.element2'));

这个方法会自动清空容器原有内容，然后把两个元素都插入进去。

方法3：拼接元素的HTML字符串（适合无需保留事件绑定的场景） #

如果你的元素不需要保留之前绑定的事件，可以直接拼接它们的HTML代码：

// 注意要获取原生DOM元素的outerHTML属性
$('.container').html($('.element1')[0].outerHTML + $('.element2')[0].outerHTML);

⚠️ 注意：这种方式会重新创建DOM元素，原来元素上的事件绑定会丢失，所以如果元素有交互逻辑的话，不推荐用这个方法。

方法4：用appendTo()移动/复制元素到容器 #

如果你想把原本在DOM其他位置的element1和element2移动到容器里，可以直接选中它们后用appendTo()：

// 移动元素到容器（原位置的元素会被移除）
$('.element1, .element2').appendTo('.container');

// 如果需要复制元素而不是移动，加上.clone()
$('.element1, .element2').clone().appendTo('.container');

内容的提问来源于stack exchange，提问作者jack