Клонировать объект и переместить в другой блок JS

Question

Всем привет! Есть объекты, которые находятся внутри блоков. Нужно переместить их в другие (родительские) блоки. На примере кода нужно взять ссылку и клонировать ее в block-1, после block-2.

И далее удалить текст (именно текст) внутри первой ссылки, оставив во второй (клонированной).

Следовательно вопрос, как это сделать, куда копать?

<div class="block-1">
  <div class="block-2">
    <a href="#1">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#2">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#3">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#4">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#5">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#6">Текст ссылки</a>
  </div>
</div>

Answer 1

document.querySelectorAll('.block-1 .block-2 a').forEach(a => {
  a.addEventListener('click', function(e) {
    let newA = a.cloneNode(true);
    document.getElementById('new-parent').appendChild(newA);
    a.textContent = '';
  });
});

#new-parent {
  border: 1px solid black;
  padding: 5px;
}

<div class="block-1">
  <div class="block-2">
    <a href="#1">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#2">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#3">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#4">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#5">Текст ссылки</a>
  </div>
</div>

<div class="block-1">
  <div class="block-2">
    <a href="#6">Текст ссылки</a>
  </div>
</div>

<div id="new-parent"></div>

БЛОГ НА HUSL

Клонировать объект и переместить в другой блок JS

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