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

Question

我有这个 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>

我想将 div 的内容移动.two到.one使用纯 javascript（不是 jQuery）中，所以我们得到：

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

考虑到毫秒性能，最好的方法是什么？

Answer 1

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

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

[...two.children].forEach(element => {
  one.insertAdjacentElement('beforeEnd', element);
});

<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>

另请注意，我使用了 ES2015 语法。