使用纯javascript将div内容移动到另一个div中

我有以下HTML设置：

<div class="one">
    <div class="text">One</div>
    <div class="text">One</div>
</div>

<div class="two">
    <div class="text">Two</div>
    <div class="text">Two</div>
</div>

在考虑毫秒性能的情况下，最好的方法是什么？

我个人更喜欢它，因为它可以让您更好地控制元素的放置位置，但请注意它的浏览器支持

const one=document.querySelector（'.one'）；
consttwo=document.querySelector（'.two'）；
[…两个.children].forEach（元素=>{
一、insertAdjacentElement（'beforeEnd'，element）；
});

一个
一个
两个
两个
可能重复的问题实际上有一个本机答案-用于移动节点

在您的情况下，代码如下所示：

var one = document.querySelector(".one");
var children = document.querySelector(".two").children;

Array.prototype.forEach.call(children, function (child) {
    one.appendChild(child);
});

如果您在追求性能提升，则可以在
的同时使用
循环并使用

var one = document.querySelector(".one");
var children = document.querySelector(".two").children;
var frag = document.createDocumentFragment();

while (children.length) {
    frag.appendChild(children[0]);
}

one.appendChild(frag);

更快的解决方案（）：

var one=document.querySelector（“.one”）；
var children=[…document.querySelector（“.two”）.children]；
var frag=document.createDocumentFragment（）；
var i=0；
var il=儿童的长度；
而（i
纯Javascript，与大多数浏览器和旧版本兼容，使用querySelector以获得第一个找到的类，而不是返回数组的getElementsByClassName

var one = document.querySelector('.one');
var two = document.querySelector('.two');

如果要将其设置为最后一个子项，则：

while(two.children.length>0)
    one.appendChild(two.children[0]);

如果您希望将其作为第一个子项，则将内容移动到第一个子项之前

while(two.children.length>0)
    one.insertBefore(two.children[0], one.firstChild);

最后，对于类似情况，可用以下方法清洁替换一个：

one.innerHTML = two.innerHTML;

注意：最后一个实现删除了“一”的所有内容，并将内容设置为“二”
可能与我遇到的问答相同，但我认为这个问题是独立的（考虑到微性能）。给出div id 1,2并使用javascript:document.getElementById（'1'）。appendChild（document.getElementById（'2'）；试用过？？这些元素在移动之前是否会附加事件处理程序？@Yoshi是的，它们会。有没有可能与James的答案进行性能比较，因为两者的方法不同？另外，浏览器支持
InsertAdjaceIntellement（）
看起来不错：@henrikpeterson如果我有时间，我会的，但是请在jsperf上自己测试一下。com@HenrikPetterson谢天谢地，此解决方案还保留了事件侦听器！有没有可能将性能与evolutionxbox的答案进行比较，因为两者的方法不同？这些元素确实附加了事件处理程序。W这个解决方案还能用吗？谢谢您的测试。@HenrikPetterson是-appendChild将保留事件侦听器（我想InsertAdjaceEntelement也会，但我还没有测试它）.innerHTML将不会生效，除非您授权events@HenrikPetterson-虽然没有太多，但evolutionbox的速度似乎越来越快。如果速度很重要，请使用真实数据而不是本演示来测试这两种解决方案，但数字似乎暗示evolutionbox的解决方案会更快win@JamesLong我不会猜到的也不是。
while(two.children.length>0)
    one.insertBefore(two.children[0], one.firstChild);

one.innerHTML = two.innerHTML;