перенести список с одного дива в другой

149

02 мая 2019, 13:20

есть два дива, не могу до конца реализовать, чтоб при нажатии кнопки, список из одного дива перенёсся в другой

<div class="main_block">
<div class="list">
<ol class="list-item">
<li>элемент списка 1</li>
<li>элемент списка 2</li>
<li>элемент списка 3</li>
<li>элемент списка 4</li>
<li>элемент списка 5</li>
</ol>
</div>
<div id="a" class="a">
<ol id="lists"></ol>
</div>
</div><br>
<button>кнопка</button> 
<script>
var btn=document.querySelector('button');
btn.addEventListener('click', func);
function func (){
var elems=document.getElementsByTagName('li');
for(i=0; i<elems.length; i++){
var newLi=document.createElement('li');
newLi.innerHTML=elems[i].innerHTML;
}
lists.appendChild(newLi);
}
</script>

по этой функции в итоге перемещается только последний элемент списка, скажите почему так происходит

Answer 1

Если требуется сохранить html как есть (id,классы). На самом деле лучше навешать на первый ol свой id и работать с ним class="list-item" может быть не уникален. Но суть решения думаю понятна.

<div class="main_block"> 
<div class="list"> 
div 1 
<ol class="list-item"> 
<li>элемент списка 1</li> 
<li>элемент списка 2</li> 
<li>элемент списка 3</li> 
<li>элемент списка 4</li> 
<li>элемент списка 5</li> 
</ol> 
</div> 
<div id="a" class="a"> 
div 2 
<ol id="lists"></ol> 
</div> 
</div><br> 
<button>кнопка</button>  
 
<script> 
	var btn=document.querySelector('button'); 
	btn.addEventListener('click', func); 
	function func (){ 
	document.querySelector('#lists').innerHTML=document.querySelector('.list-item').innerHTML; 
	document.querySelector('.list-item').innerHTML=''; 
	} 
</script>