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>

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

<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语法。

Answer 2

可能的重复问题实际上有一个原生答案 - 使用.appendChild()来移动节点。

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

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

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

您可以使用while循环对其进行循环播放，并在性能提升后使用DocumentFragment。

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

更快的解决方案（source）：

var one = document.querySelector(".one");
var children = [...document.querySelector(".two").children];
var frag = document.createDocumentFragment();
var i = 0;
var il = children.length;

while (i < il) {
    frag.appendChild(children[i]);
    i += 1;
}

one.appendChild(frag);

Answer 3

与大多数浏览器和旧版本兼容的纯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;

注意：这最后一个实现将删除“一个” 的所有内容，并将内容设置为“两个”

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

3 个答案: