Как вывести элементы htmlcollection в цикле на странице?

Question

[Александр Преображенский]

В приведенном ниже коде, элементы из статичного списка просто переносятся в ul с id parent, а мне нужно скопировать их в новый элемент

<ul class="menu">
	<li class="menu__item">Item 1</li>
	<li class="menu__item">Item 2</li>
	<li class="menu__item">Item 3</li>
</ul>
<ul id="parent"></ul>

var parent = document.getElementById('parent');
var items = document.getElementsByClassName('menu__item');
var arr = Array.from(items);

for (let i = 0; i < items.length; i++) {
	parent.appendChild(arr[i]);
}

Пробовал таким образом (причем не важно использовал ли я items[i] или arr[i] ), в обоих случаях на выходе получал три object HTMLLIElement.

for (let i = 0; i < items.length; i++){
	parent.innerHTML += items[i];
}

Объясните, пжлста, где я косячу и как выводить элементы коллекции на страницу? Заранее огромное спасибо =)

Answer 1

[0xD34F]

Откуда и куда копируем:

const source = document.querySelector('.menu');
const target = document.querySelector('#parent');

• Вариант раз - cloneNode.
  
  Можно перебирать элементы и копировать их по одному:
  
  

  for (const n of source.children) {
    target.appendChild(n.cloneNode(true));
  }
  
  // или
  
  source.querySelectorAll(':scope > *').forEach(n => {
    target.insertAdjacentElement('beforeend', n.cloneNode(true));
  });

  
  А можно скопировать их родителя:
  
  

  // вложенные узлы копии добавляем в целевой элемент
  target.append(...source.cloneNode(true).children);
  
  // или, заменяем целевой элемент копией исходного
  target.replaceWith(source.cloneNode(true));

  
  
• Вариант два - копируем не сами элементы, а разметку:
  
  

  target.innerHTML = source.innerHTML;
  
  // или
  
  target.outerHTML = source.outerHTML;