How to append items of list at the beginning/end of another list using jquery?

I have the 2 ul with set of list.I want to append the item of 2nd list in the first list as shown

List 1
<ul class="thumbicon"> <!-- need to append the class 'flex-direction-nav' -->
   <!-- append prev li -->
   <li>item 1<li>
   <li>item 2<li>
   <li>item 3<li>
   <!-- append next li -->
</ul>
 List 2
<ul class="flex-direction-nav">
  <li class="flex-nav-prev">
     <a class="flex-prev" href="#">Previous</a>
  </li>
  <li class="flex-nav-next">
     <a class="flex-next" href="#">Next</a>
  </li>
</ul>

What I want

<ul class="thumbicon flex-direction-nav"> 
  <li class="flex-nav-prev">
    <a class="flex-prev" href="#">Previous</a>
  </li>
  <li>item 1<li>
  <li>item 2<li>
  <li>item 3<li>
  <li class="flex-nav-next">
    <a class="flex-next" href="#">Next</a>
  </li>
 </ul>

Is it possible to do like this in jquery?

Solution

First add classes from first ul to second, then append li's to second ul after first li and finally remove first ul

$('.flex-direction-nav')
  .addClass($('ul.thumbicon')
  .attr('class'))
  .find('li:first')
  .append($('ul.thumbicon').children())
  
$('ul:first').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbicon"> 
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="flex-direction-nav">
  <li class="flex-nav-prev">
    <a class="flex-prev" href="#">Previous</a>
  </li>
  <li class="flex-nav-next">
    <a class="flex-next" href="#">Next</a>
  </li>
</ul>

Or if you want to append to first div from second you can do it like this.

$('.thumbicon')
  .addClass($('ul.flex-direction-nav').attr('class'))
  .prepend($('ul:eq(1) li:eq(0)'))
  .append($('ul:eq(1) li:eq(0)'))
  
$('ul:eq(1)').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbicon"> 
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="flex-direction-nav">
  <li class="flex-nav-prev">
    <a class="flex-prev" href="#">Previous</a>
  </li>
  <li class="flex-nav-next">
    <a class="flex-next" href="#">Next</a>
  </li>
</ul>