Как перенести контент в другое место DOM а затем вернуть его обратно на свои места?

Question

По клику на кнопку "Forvard" сначала клонировать и удалить часть контента из DOM и отобразить его в другое место. Этот вопрос решился:

const forvard = document.getElementById('forvard');

forvard.addEventListener('click', function(){
  const catContent = document.querySelectorAll('.category-content');
  catContent.forEach(item=>{
    item.parentNode.removeChild(item);
    const clonedContent = item.cloneNode(true);
    document.getElementById('only-category').appendChild(clonedContent)
  })
})

const back = document.getElementById('forvard');

  <div class="content-wrapper">
    
    <div id="grid-table">

      <button id="forvard" type="button">Forvard</button>
      
      <button id="back" type="button">Back</button>

      <div class="service-title" id="service-1">Service One</div>

      <div class="category-content" id="category-1-content">
        <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
        <p>Sed enim in purus ultricies vitae metus.</p>
        <p>Et dolor fermentum nisi ligula</p>
        <p>Nisi eget varius nisi, eget nis</p>
      </div>

      <div class="service-title" id="service-1">Service Two</div>

      <div class="category-content" id="category-2-content">
        <p>Aenean sed enim in purus ultricies vitae metus.</p>
        <p>Nullam et dolor fermentum ligula</p>
        <p>Etiam eget varius nisi, eget fermentum nis</p>
      </div>

  </div>

    <div id="only-category"></div>
    
  </div>

  <div class="content-wrapper">
    
    <div id="grid-table">

      <button id="forvard" type="button">Forvard</button>
      
      <button id="back" type="button">Back</button>

      <div class="service-title" id="service-1">Service One</div>

      <div class="category-content" id="category-1-content">
        <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
        <p>Sed enim in purus ultricies vitae metus.</p>
        <p>Et dolor fermentum nisi ligula</p>
        <p>Nisi eget varius nisi, eget nis</p>
      </div>

      <div class="service-title" id="service-1">Service Two</div>

      <div class="category-content" id="category-2-content">
        <p>Aenean sed enim in purus ultricies vitae metus.</p>
        <p>Nullam et dolor fermentum ligula</p>
        <p>Etiam eget varius nisi, eget fermentum nis</p>
      </div>

  </div>

    <div id="only-category"></div>
    
  </div>

Посмотреть так же можно здесь.

Проблема в том, что по клику на кнопку "Back" мне нужно все вернуть на свои места, а при клике на "Forvard" контент переносится в свободный блок. Чтобы вернуть его обратно, нужно каждый блок разместить под соответствующим заголовком. Я пробовал сделать такой реверс, но в итоге все криво возвращается. Подскажите, есть ли вообще возможность реализовать такую задумку?

Answer 1

Для перемещения элементов по дереву DOM, используются методы appendChild, insertBefore, append, prepend, insertAdjacentElement контейнера (того элемента, в который переносим). Дублирования элементов не происходит при использовании этих методов.

Клонирование и удаление - для только лишь переноса элементов, совершенно не требуются.

Простой пример, где все перемещаемые элементы изначально находятся в одном контейнере (т.е., тут достаточно запомнить их порядок массивом ссылок на DOM-объекты):

const rndTo = to => Math.floor(Math.random() * to),
      [leftCol, rightCol] = [...document.querySelectorAll('.column')],
      orderedItems = [...document.querySelectorAll('.column.left .item')];
document.addEventListener('click', evt => {
  const itm = document.querySelector('.item:focus');
  if (itm) { // рандомное перемещение элемента по которому кликнули
    const elAfter = rightCol.children[rndTo(rightCol.children.length)];
    rightCol.insertBefore(itm, elAfter);
  } else if (evt.target.id === 'back') { // возврат эл-тов в исходный контейнер
    orderedItems.forEach(itm => leftCol.appendChild(itm));
    // или itm => leftCol.insertAdjacentElement('beforeend', itm)
    // или через insertBefore в обратном for-цикле по orderedItems, но это уже лишнее усложнение
  }
});

* { font: 1rem sans-serif; }
p, #back { font-size: 0.8rem; }
#back, .wrap { width: 300px; }
.wrap { display: flex; justify-content: space-between; margin: 0.25rem 0; }
.column { flex: 0 0 40%; }
.item { padding: 0.25rem 1rem; margin: 0.25rem 0; border: 1px solid #444; cursor: pointer; }
.column.right .item { color: #444; background: #ffffed; cursor: auto; }

<p>Клик по элементам левого столбца переместит их в случайную позицию в правом столбце.</p>
<button id="back" class="move">? Вернуть элементы обратно</button>
<div class="wrap">
  <div class="column left">
    <div class="item one" tabindex="-1">Item 1</div>
    <div class="item two" tabindex="-1">Item 2</div>
    <div class="item three" tabindex="-1">Item 3</div>
    <div class="item four" tabindex="-1">Item 4</div>
  </div>
  <div class="column right">
    <div class="item a">Item A</div>
    <div class="item b">Item B</div>
  </div>
</div>

БЛОГ НА HUSL

Как перенести контент в другое место DOM а затем вернуть его обратно на свои места?

Ответы (1 шт):