How to append two HTMLElements into one Javascript

Question

So, i have two HTMLElements that i get using:

var el1 = document.getElementById('div1')
var el2 = document.getElementById('div2');

what i want to do is merge this 2 elements that are inserted inside two containers like below:

<container-x1>
    <container-x2>
        <div id="div1">test1</div>
    </container-x2>
</container-x1>

<container-y1>
    <container-y2>
        <div id="div2">test2</div>
    </container-y2>
</container-y1>

my goal after this is to remove completely remove the container y1 and merge test 1 and test 2 into same container like this:

<container-x1>
    <container-x2>
        <div id="div2">test1  test2</div>
    </container-x2>
</container-x1>

any help? thanks in advance

Answer 1

You can try this:

const el1 = document.getElementById('div1');
const el2 = document.getElementById('div2');

el2.innerHTML = el1.innerHTML + ' ' + el2.innerHTML;

el1.replaceWith(el2);

document.getElementsByTagName('container-y1')[0].remove();

<container-x1>
    <container-x2>
        <div id="div1">test1</div>
    </container-x2>
</container-x1>

<container-y1>
    <container-y2>
        <div id="div2">test2</div>
    </container-y2>
</container-y1>