Как добавить элемент в блок между другими уже созданными элементами с сохранением на него ссылки?

Question

[Антон Шульц]

Как добавить элемент box4 в блок main между box1 и box2?
При этом сохранив на него ссылку, чтобы сразу можно было его удалить или добавить другой стиль?

<div class="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

Answer 1

[Stalker_RED]

const target = document.querySelector('.box1')

const newElem = // ссылка на новый элемент
      document.createElement('div') 
newElem.class = "box4"

target.insertAdjacentElement('afterend', newElem)


newElem.textContent = 'hello world' // модификация уже после вставки

insertAdjacentElement - крутая штука. Работает быстро, позволяет вставлять перед элементом, после него, или внутри в начало и в конец.
Один недостаток - сложно запомнить как оно пишется. Только автокомплитом в IDE и спасаюсь :)

Comments

[Comsequent]

А если элементов штук 50-т, и новый должен оказаться между 39-м и 40-м?

[Антон Шульц]

спасибо, очень интересная команда.
а как между собой можно поменять например box1 и box3?

[Stalker_RED]

Comsequent, найти 39-ый и вставить после него. Ну или перед сороковым, без разницы.

Антон Шульц,

например так:

const el1 = const target = document.querySelector('.box1')
const el2 = const target = document.querySelector('.box2')
const el3 = const target = document.querySelector('.box3')
el2.insertAdjacentElement('afterend', el1)
el2.insertAdjacentElement('beforebegin', el3)

[Антон Шульц]

Stalker_RED,спасибо, а как-то можно санимировать эти движения?
Чтобы блоки как бы переехали на свои новые места, а не просто мгновенно заменились.

[Stalker_RED]

Антон Шульц, можно, но все становится немножко сложнее.

Определяем текущие координаты блоков, даем блокам абсолютное позиционирование, одновременно с этим вставляем на их место пустые блоки.

Навешиваем на них класс типа такого

.i-like-to-move-it-move-it {
  transition: top 0.3s ease-out, left 0.3s ease-out;
}

Задаем им новые координаты, и ждем.

Когда анимация закончена перествляем блок в DOM-е, одновременно убирая заглушки.

Answer 2

[Ilya Muromtsev]

modifying-document