Как создать элемент списка через jQuery?

408

28 января 2017, 11:53

Как через jquery в .menu ul создать структуру вложенный список чтобы получилось вот так:

<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>

И в этот класс .newmenu добавить дочерние элементы из second-menu .

Пример:

<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>

Если вкратце: есть меню, в котором нужно создать ещё одно произвольное меню и в него через jquery вытащить li из другого места.

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>