.append не заменять аналогичные элементы

Question

У меня есть список div.slides внутри div.slider. С js я получаю NodeList всех .slides внутри .slider: let slides = document.querySelectorAll('.slider .slide'); отлично (также сам ползунок const slider = document.querySelector('.slider');).

Но всякий раз, когда я пытаюсь добавить последний элемент от .slides до .slider - он удаляет последний .slider.

Так, например, из списка a b c это должно быть c a b c, но оно становится c a b .

Я пробовал slider.insertBefore(slides[slides.lenght -1, slides[0]); slider.appendChild(slides[slides.length - 1]); и несколько других.

Как мне добавить копию элемента nodeList в начало / конец БЕЗ удаления аналогичного / дублирующего элемента?

нет jquery

Answer 1

Используйте Node.cloneNode () :

slider.insertBefore(slides[slides.lenght -1].cloneNode(), slides[0]);

Оба insertBefore() и appendChild() перемещают узел в новую позицию, не копируя его.

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

Если данный узел уже существует в документе, insertBefore() перемещает его из текущей позиции в новую позицию. (То есть он будет автоматически удален из своего существующего родителя перед добавлением его к указанному новому родителю.)

Это означает, что узел не может находиться в двух местах документа одновременно .

Примечание : Node.cloneNode() можно использовать для создания копии узла перед добавлением его под новый родительский узел. Обратите внимание, что копии, сделанные с помощью cloneNode (), не будут автоматически синхронизироваться c.