Trying to move all list items in .origin ul to .target ul with vanilla javascript.
<div id="container">
<span>Origin</span>
<ul class="origin">
<li class="level-top li-item">Origin entry 1</li>
<li class="level-top li-item">Origin entry 2</li>
<li class="level-top li-item">Origin entry 3</li>
</ul>
<br>
<span>Target</span>
<ul class="target">
</ul>
</div>
var origin = document.querySelector('.origin');
document.querySelector(".target").append(origin);
This moves them however, it puts the entire origin ul into the target ul. Should I be iterating through the list items?
Shornt and simple solution would be
const t = document.querySelector(".target")
t.innerHTML += o.innerHTML
o.innerHTML = ""
Just append origin's children to target, like this:
const origin = document.querySelector('.origin');
const target = document.querySelector('.target');
target.append(...origin.childNodes);
or you can do it in one line like this:
document.querySelector('.target').append(...document.querySelector('.origin').childNodes)