Почему при переносе элементов по DOM происходит их дублирование?

Question

[day-light]

день всем)
есть такая задача.
на сайте два меню и я хочу на мобильных второе перенести в первое.


https://test2.dreamclub.dp.ua/
проблема в том, что при переносе элементы дублируются и при переносе получается 6 элементов а не 3


код

var moved_menu = (".secondary_menu ul li");
if(jQuery(window).width() < 768) {

jQuery (moved_menu).insertAfter(".primary_menu ul li:nth-child(2)");

};

может кто подсказать - почему возникает дубль элементов?

Answer 1

[Григорий Боев]

Из документации:

Description: Insert every element in the set of matched elements after the target.

Т.е. это не перемещение элемента как таковое, а вставка такого содержимого после каждого элемента из списка. Иначе бы такой элемент вставлялся несколько раз в разные места.

Answer 2

[alexalexes]

insertAfter
Вам нужен не этот метод. Для перемещения узлов в пределах родителя используется replaceChild.
PS:
".primary_menu ul li:nth-child(2)"
Научитесь захватывать узлы нативными методами querySelector и querySelectorAll.
Нет причин использовать JQuery в вашей задаче.