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

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 source = document.querySelector('.box1').children;
const target = document.querySelector('.box2');

Копируем:

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

или

target.children[0].after(...Array.prototype.map.call(source, ({ textContent: n }) => {
  const p = document.createElement('p');
  const a = document.createElement('a');
  a.href = '#' + n;
  a.textContent = n;
  p.append(a);
  return p;
}));

Comments

[JefAir]

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