Moving a div to an already existing list

Question

I have my searchbox code in a div. I need to move this to my toggle navigation that has list items. I could successfully move my div using this:

 $('.nav ul').prepend($('#search').html());

But now I need to make this div appear as a list item. How do I do that?

This is what my navigation looks like:

<nav class="nav">

    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Portfolio</a></li>
        <li class="nav-item"><a href="#">Testimonials</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>

</nav>

Is this something doable?

Thank you for all your help.

Answer 1

$('.nav ul').prepend($('<li>'+$('#search').html()+'</li>'));

Answer 2

You could wrap you #search div in a list item after moving it :

$('#search').prependTo('.nav ul').wrap('<li />');

(JSFiddle example here)