Как перенести элементы одного класса в блоки другого класса на js?

Question

[FrolovSite]

Помогите, пожалуйста, перенести несколько элементов одного класса, в необходимые блоки. Блоков и элементов может быть неограниченное количество. Буду рад подсказке как на чистом js, так и на jquery.

Вот так ситуация выглядит изначально:

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 1
    <p>p1</p>
    <p>p2</p>
  </div>

  <div>Переносим отсюда 1
    <p class="perenosimiy-element"><b>Переносимый элемент 1</b></p>
    <p>p3</p>
    <p>p4</p>
  </div>
</div>

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 2
    <p>p5</p>
    <p>p6</p>
  </div>

  <div>Переносим отсюда 2
    <p class="perenosimiy-element"><b>Переносимый элемент 2</b></p>
    <p>p7</p>
    <p>p8</p>
  </div>
</div>

А в результате должно быть вот так:

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 1
    <p class="perenosimiy-element"><b>Переносимый элемент 1</b></p>
    <p>p1</p>
    <p>p2</p>
  </div>

  <div>Переносим отсюда 1

    <p>p3</p>
    <p>p4</p>
  </div>
</div>

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 2
    <p class="perenosimiy-element"><b>Переносимый элемент 2</b></p>
    <p>p5</p>
    <p>p6</p>
  </div>

  <div>Переносим отсюда 2

    <p>p7</p>
    <p>p8</p>
  </div>
</div>

Нерабочий пример в редакторе - https://codepen.io/YuriyFrolov/pen/ZEMgzEp

Answer 1

[Вадим]

Ну было достаточно близко.

- const targetBlock = element.closest('.perenesti-syuda');
+ const targetBlock = element.closest('.block').querySelector('.perenesti-syuda')

perenesti-syuda - не один из родителей для perenosimiy-element - поэтому скрипт не работал, так как метод .closest проверяет сам элемент, а потом по очереди всех его родителей до root. Поэтому у Вас всегда было targetBlock - null. Вы бы легко это увидели, если бы научились отладке кода - https://learn.javascript.ru/debugging-chrome. (Отладка - один из самых важных навыков разработчика)

Осталось выбрать подходящий метод вставки. У Вас appendChild - добавляет в конец. prepend - Добавит в начало.
Ну или другой какой больше понравится - https://learn.javascript.ru/modifying-document

Comments

[FrolovSite]

Спасибо большое! Работает!