Переупорядочить список HTML с помощью Javascript или JQuery

Question

Я ищу помощь, чтобы увидеть, можно ли изменить порядок элементов на панели навигации. Сама панель создается модулем внутри CMS, который заблокирован для редактирования.

Как таковой, я хотел бы изменить порядок «кнопок», чтобы 4-й вариант переместился на 1-е место в строке меню.

Заблокированный модуль создает следующий HTML:

<div class="navigation-primary"> 
    <ul> 
     <li><a href="/1" class="nav-link">AAA</a></li> 
     <li><a href="/2" class="nav-link">BBB</a></li> 
     <li><a href="/3" class="nav-link">CCC</a></li> 
     <li><a href="/4" class="nav-link trigger">DDD</a></li> 
     </ul> 
</div> 

Могу ли я сделать это с Javascript или JQuery?

Answer 1

Используйте document.querySelectorAll(), чтобы получить список элементов, а также ссылку на ul. Затем предварять последний элемент списка в ul:

var listItems = document.querySelectorAll('.navigation-primary li'); 
 

 
document.querySelector('.navigation-primary > ul').prepend(listItems[listItems.length - 1]);

<div class="navigation-primary"> 
 
    <ul> 
 
     <li><a href="/1" class="nav-link">AAA</a></li> 
 
     <li><a href="/2" class="nav-link">BBB</a></li> 
 
     <li><a href="/3" class="nav-link">CCC</a></li> 
 
     <li><a href="/4" class="nav-link trigger">DDD</a></li> 
 
    </ul> 
 
</div>