How to create a nested list structure through jquery in .menu ul to make it like this:

<div class="menu"> <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Новый список<ul class="newmenu"></ul></li> </ul> </div>

And in this class .newmenu add children from the second-menu.

Example:

 <div class="menu"> <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> </ul> </div> <div class="second-menu"> <ul> <li>Пункт 21</li> <li>Пункт 22</li> <li>Пункт 23</li> <li>Пункт 24</li> <li>Пункт 25</li> </ul> </div>

In short: there is a menu in which you need to create another arbitrary menu and, through jquery, pull li from another place.

    1 answer 1

     const firstMenu = $('.menu > ul'); const secondMenu = $('.second-menu > ul'); firstMenu.append('<li>Новое меню</li>'); firstMenu.children('li:last-child').append(secondMenu); $('.second-menu').remove(); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> </ul> </div> <div class="second-menu"> <ul> <li>Пункт 21</li> <li>Пункт 22</li> <li>Пункт 23</li> <li>Пункт 24</li> <li>Пункт 25</li> </ul> </div>