testJS

by Fiddel

HTML

<ul id="rein">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>


<button id="move">
&gt;&gt;
</button>
<button id="moveBack">
&lt;&lt;
</button>

<ul id="raus">
</ul>

CSS

ul {
	border:1px solid red;float:left;
}


button {float:left;}

JavaScript

let eintraegeRein = document.getElementById("rein");
let eintraegeRaus = document.getElementById("raus");
let buttonMoveRaus = document.getElementById("move");
let buttonMoveRein = document.getElementById("moveBack");

buttonMoveRaus.addEventListener('click',function() {

	while(eintraegeRein.hasChildNodes) {
	
		let item = eintraegeRein.removeChild(eintraegeRein.firstChild);
		eintraegeRaus.appendChild(item);
	
	}
});

buttonMoveRein.addEventListener('click',function() {

	while(eintraegeRaus.hasChildNodes) {
		let item = eintraegeRaus.removeChild(eintraegeRaus.firstChild);
		eintraegeRein.appendChild(item);
	
	}
}
);