Vanilla JS, как поменять блоки местами?

Question

[Pavel Khokhlov]

Всем привет, помогите с решением, а то люблю все усложнять как обычно )

Существует массив с данными, из него рендерятся блоки на страницу из шаблона
(для примера их три).
Есть кнопка, которая должна управлять двумя последними блоками,
при каждом нажатии менять их местами.
Получается поменять два последних объекта местами в массиве,
вывожу в консоль новый массив при клике.
Но не могу пока найти решения как их переписать на странице (переписать только те что поменялись)

https://codepen.io/Paul-Kh/pen/BamNxKj?editors=1111

Answer 1

[bingumd]

как пример:

updateCards() {
    console.log(this._renderedCards);
     document.querySelector('.list').innerHTML = ""
     this.renderCards()
}

Comments

[Pavel Khokhlov]

да было такое решение все снести в контейнере и заново прописать.
а если массив увеличится в разы? не будет ли это лишней нагрузкой?

[bingumd]

Pavel Khokhlov, не думаю что будет нагрузка

Answer 2

[Антон Шаманов]

Вы можете манипулировать элементами в dom, либо перерисовать список контент тега .list - Section.renderCards() (рескрсоемкий вариант).
Почитайте про создание пользовательских тегов, пример https://codepen.io/WinterSilence/pen/VwmVobN