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

Question

[JefAir]

Всем привет. Подскажите, пожалуйста, со скриптом.

Задача:
Есть два контейнера: box1 и box2
Требуется
- скопировать содержимое первого контейнера
- заменить в нем теги
- добавить ссылки в соответствии с содержимым
- вставить во второй контейнер между двумя уже существующими тегами

Исходная разметка:

<div class="box1">
	<h2>Text 1</h2>
	<h2>Text 2</h2>
	<h2>Text 3</h2>
</div>

<div class="box2">
	<p><a href="#Text 0">Text 0</a></p>
	<p><a href="#Text N">Text N</a></p>
</div>

На выходе должно быть так:

<div class="box1">
	<h2>Text 1</h2>
	<h2>Text 2</h2>
	<h2>Text 3</h2>
</div>

<div class="box2">
	<p><a href="#Text 0">Text 0</a></p>

	<p><a href="#Text 1">Text 1</a></p>
	<p><a href="#Text 2">Text 2</a></p>
	<p><a href="#Text 3">Text 3</a></p>

	<p><a href="#Text N">Text N</a></p>
</div>

Comments

[Евгений]

Покажите что у вас получается, а то похоже на задание

Answer 1

[0xD34F]

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');

box2.firstElementChild.insertAdjacentHTML('afterend', Array
  .from(box1.children, ({ innerText: n }) => `<p><a href="#${n}">${n}</a></p>`)
  .join('')
);

Comments

[JefAir]

Большое спасибо!