Содержимое одного div элемента по клику отображались в другом div элементе

1. выбрать всех героев

   const heroes = Array.from(document.querySelectorAll('.Group-hero .hero'))
   

2. на каждого из них навесить по бафу

   • arr.forEach
   • item.addeventlistener('click', magicText)
3. • ,-

   const magicText = e =>
     document.getElementsByClassName('top')[0].appendChild(e.target)
   

   • Event.target

1. Определить контейнер, куда будут выводиться герои.

    const showHeroWrap = document.querySelector('.top');

2. Определить всех героев.

    const heroes = document.querySelectorAll('.hero');

3. Через цикл перебора forEach, для каждого элемента назначить событие click.

    heroes.forEach(hero => hero.addEventListener('click', event => { ... }));

4. В теле функции события ты создаешь клон .clonNode(true) элемента по которому кликаешь, но, так как событие срабатывает и на внутренних элементах, целевой элемент события и итоговый клон может быть другой элемент (вложенный), ты используешь метод .closest(), этот метод будет идти вверх по дереву, пока не упрется в искомый по CSS-селектору элемент.

   const clone = event.target.closest('.hero').cloneNode(true);

5. Очищение контейнера перед помещением туда клона, что бы не копить их там.

    showHeroWrap.innerHTML = '';

6. Помещение .append() клонированного элемента clone в контейнер.

   showHeroWrap.append(clone);

const showHeroWrap = document.querySelector('.top');
const heroes = document.querySelectorAll('.hero');

heroes.forEach(hero => hero.addEventListener('click', event => {
  const clone = event.target.closest('.hero').cloneNode(true);
  
  showHeroWrap.innerHTML = '';
  showHeroWrap.append(clone);
}));

.hero {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center; 
  align-items: center;
  border: 1px solid #000;
  border-radius: 50%;
}

.hero + .hero {
  margin-left: 15px;
}

.name {
  font-size: 10px;
}

.Group-hero {
  display: flex;
  margin: 20px;
}

.Group-hero .hero {
  cursor: pointer;
}

<div class="top"></div>

<div class="Group-hero"> 
    <div class="hero">
        <div class="image"><img src="img/nilfgaard.jpg" alt=""> </div>
        <div class="name"><h1>Nilfgaard</h1></div>  
    </div>

    <div class="hero Redania">
        <div class="image"><img src="img/redania.jpg" alt=""> </div>
        <div class="name"><h1>Redania</h1></div>
    </div>

    <div class="hero Skellige">
        <div class="image"><img src="img/skellige.jpg" alt=""> </div>
        <div class="name"><h1>Skellige</h1></div>
    </div>  
</div>