Move div content into another div using pure javascript

Question

I have this HTML setup:

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

I want to move the content of div .two into .one using pure javascript (not jQuery) so we get:

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

What is the best way to do this with millisecond performance in mind?

Answer 1

I personally prefer insertAdjacentElement as it gives you more control as to where to put elements, but be careful to take note of its browser support.

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>

Also note that I've used ES2015 syntax.