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?

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?

• javascript

• possible duplicate of stackoverflow./questions/6329108/… – swetansh kumar Commented Nov 21, 2017 at 11:21
• 1 I came across that Q&A too, but I think this question stands on its own (with the micro-performance in consideration). – Gary Woods Commented Nov 21, 2017 at 11:21
• Give div id 1,2 and use javascript : document.getElementById('1').appendChild( document.getElementById('2') ); tried it?? – Shifat Commented Nov 21, 2017 at 11:26
• Will these elements have event handlers attached to them before they are moved? – Yoshi Commented Nov 21, 2017 at 11:50
• @Yoshi Yes they will. – Henrik Petterson Commented Nov 21, 2017 at 11:51

3 Answers 3

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.

The possible duplicate question actually has a native answer - use .appendChild() to move the nodes.

In your case, the code would look like this:

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

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

You can loop over it with a while loop and use a DocumentFragment if you're after the performance boost.

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

Faster solution (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);

Pure Javascript, patible with most browser and old versions, use querySelector as its better in performance to get the first found class instead getElementsByClassName thats returns an array.

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

If you want to set it as last children, then:

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

If you want it as first children, then move the content before the first child of one:

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

And last, useful for similar cases a clean replacement for one could be with:

one.innerHTML = two.innerHTML;

Note: this last implementation removes all content of "one" and sets the content by "two"