Как менять HTML элементы местами с помощью JS?

Question

[Айнур Ярулин]

<section class="wrapper">
   <div class="item">Блок 1</div>
   <div class="item">Блок 2</div>
   <div class="item">Блок 3</div>
   <div class="item">Блок 4</div>
   <div class="item">Блок 5</div>
</section>

Как с помощью JavaScript меня блоки местами?
Например, чтобы Блок 1 оказался последним, а Блок 2 первым
или чтобы Блок 5 был первым, а Блок 1 вторым?

Answer 1

[Max QNEI]

То что вам нужно - insertBefore (MDN)

<section class="wrapper">
   <div class="item">Блок 1</div>
   <div class="item">Блок 2</div>
   <div class="item">Блок 3</div>
   <div class="item">Блок 4</div>
   <div class="item">Блок 5</div>
</section>

var itemListParent = document.querySelector('.wrapper');
var itemList = document.querySelectorAll('.item');

// сработает как appendChild (т.к. второй аргумент null) - поместит второй элемент в конец родительского.
itemListParent.insertBefore(itemList[1], null);

// сработает как того предполагает insertBefore() - вставит пятый элемент перед первым
itemListParent.insertBefore(itemList[4], itemList[0]);

Плюс применения insertBefore (или appendChild) в том, что прикрепленные слушатели к элементу не сотрутся как в случае использования innerHTML.

Comments

[Айнур Ярулин]

спасибо)

Answer 2

[Иван Соломенников]

В самом простом варианте, выбрать по классу коллекцию и с помощью индексации обменять значения элементов которые попадают под задачу, например так:

const items = document.getElementsByClassName("item");

const tmp = items[0].innerHTML;

items[0].innerHTML = items[4].innerHTML;

items[4].innerHTML = tmp;

Для полноты, ещё необходимо условие, чтобы убедиться наверняка, что такие элементы существуют, профит.

P.S. Если у вас есть события привязанные к элементам, то рациональнее заюзать - innerText или textContent

Comments

[Max QNEI]

Нельзя изменять с помощью контентного свойства innerHTML, innerText (textContent) - это скидывает привязанные события к элементу.

[Иван Соломенников]

Max QNEI, В задаче про привязанные события к элементам не идет речи, но (innerText, textContent) возможно будет правильнее заюзать.

[Max QNEI]

Иван Соломенников, сомнительно что правильнее. Я считаю неправильным писать код который будет приводить к неожиданному эффекту, такому как потеря слушателя или потеря кастомных свойств в элементи.

Ваше решение действительно простое. Но еще пара решений лишим не будет. Пусть автор выбирает.

[Иван Соломенников]

Max QNEI, Повторюсь, автор поста не указал в задаче о том что элементы над которыми производятся действия будут иметь события.

Если отбросить привязанные события, то innerText или textContent будет предпочтительнее, так как будет парсится как текст, а не как html разметка, вот с этим согласен.

Также не помешает проверка на существование выборки о чем упоминал в ответе, так как на момент выборки элемента/элементов по каким-то причинам может не существовать, это если уже более правильно подходить к вопросу.

Answer 3

[TheAthlete]

Посмотрите в сторону свойства order в CSS Flexbox

Comments

[Айнур Ярулин]

Не, мне нужно именно с JS, я слайдер делаю)