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