squadbrodyaga
@squadbrodyaga
Татарский богатырь

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

<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 вторым?
  • Вопрос задан
  • 132 просмотра
Решения вопроса 3
@bacon
Читать до посинения https://learn.javascript.ru/document и больше не приходить на тостер с подобной ерундой.
Ответ написан
В самом простом варианте, выбрать по классу коллекцию и с помощью индексации обменять значения элементов которые попадают под задачу, например так:
const items = document.getElementsByClassName("item");

const tmp = items[0].innerHTML;

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

items[4].innerHTML = tmp;

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

P.S. Если у вас есть события привязанные к элементам, то рациональнее заюзать - innerText или textContent
Ответ написан
MaxAlexQNEI
@MaxAlexQNEI
Web-Developer
То что вам нужно - 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.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@TheAthlete
Perl 5, C, C++, компьютерные сети
Посмотрите в сторону свойства order в CSS Flexbox
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы