такое мне кажется все делают по разному, что правильно выбираете сами.
варианты:
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";
});
