Как на чистом js копировать html элемент со всеми его дочерними элементами?

Question

[Артём Лукичев]

Делаю галерею работ. Мне надо чтобы при клике на кнопку "ещё больше" появлялся ещё один блок с работами. Создать eventListener я смог а вот как скопировать галерею я не понял пожалуйста помогите. Вот код:
https://codepen.io/air_man6/full/QWLodrq

Answer 1

[xmoonlight]

Node.appendChild()

Comments

[Артём Лукичев]

а что мне добавлять?

[xmoonlight]

Артем фамилия, то, что копируете.

[Артём Лукичев]

вроде всё сделал но не работает

[xmoonlight]

Артем фамилия, значит, не всё сделали. Доделывайте.

Answer 2

[Сергей c0re]

такое мне кажется все делают по разному, что правильно выбираете сами.
варианты:
1. блок с работами имеет фиксированную высоту с overflow: hidden
при нажатии на кнопку высота блока увеличивается, блок с кнопкой скрывается.
можно это дело анимировать, ну чтоб плавно высота увеличивалась.
2. блок с работами состоит из нескольких блоков, по умолчанию показывается первый, при нажатии на кнопку появляется второй блок (меняем ему display), блок с кнопкой скрывается.
3. добавлять элементы скриптом, через .appendChild(childElement) например:

document.querySelector(".works__more__btn").addEventListener("click", function() {
  var elem = document.createElement("div");
  elem.setAttribute("class", "works__content__smallRow");
  elem.innerHTML = `
                <img src="https://www.placehold.it/375x327/25" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/50" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/75" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/100" class="works__content__smallRow__item">
`;
  document.querySelector(".works__content").appendChild(elem);
  document.querySelector(".works__more").style.display = "none";
});

как-то так...

UPD:
собственно копирование:

вы правильно сделали cloneNode, но!!!
см. Метод Node.cloneNode()
если вы хотите копировать с дочерними элементами, то необходимо передать параметр "deep" = true

Т.е. вот так:

document.querySelector(".works__more__btn").addEventListener("click", function() {
  document.querySelector(".works__content").appendChild(document.querySelector(".works__content").cloneNode(true));
  document.querySelector(".works__more").style.display = "none";
});