Append prepend

by Lucaskazama

HTML

<section>
  <div>
    <a>icon 1</a>
    <a>icon 2</a>
    <a>icon 3</a>
  </div>
  <ul> 
  </ul>
</section>
<section>
  <div>
    <a>Icon 1</a>
    <a>Icon 2</a>
    <a>Icon 3</a>
  </div>
  <ul> 
  </ul>
</section>
<button type="button" id="list">
  Turn to list
</button>
<button type="button" id="div">
  Turn do div
</button>

SCSS

div{
  display: flex;
  width:100%;
  height:50px;
  background-color:teal;
  margin:5px;
}
ul{
  display: flex;
  width:100%;
  height:50px;
  background-color:cyan;
}
body{
  padding:0;
  margin:0;
}

JavaScript

$(document).ready(function () {
	$("#list").on('click', function(){
  	$("a").each(function(){
      $(this).appendTo($(this).closest("section").find("ul"));
    });
  });
	$("#div").on('click', function(){
  	$("a").each(function(){
    	$(this).appendTo($(this).closest("section").find("div"));
    });
  });  
});