Este código funciona bien como se esperaba.

index.html

 <div id="sliderContent"> <div class="item" id="item-1"> <img src="images/image1.jpg"> </div> </div> <template id="sliderItem"> <div class="item"> <img src="dummy_image.jpg"> </div> </template>

scripts.js

 const next = document.querySelector("#next"); const sliderContent = document.querySelector("#sliderContent"); next.addEventListener('click', () => { const sliderItem = document.querySelector("#sliderItem"); const moreImages = ['image2.jpg', 'image3.jpg', 'image4.jpg']; // Create a DocumentFragment first const moreImagesHTML = document.createDocumentFragment(); moreImages.forEach((item) => { const sliderItemClone = sliderItem.content.cloneNode(true); const sliderImage = sliderItemClone.querySelector('img'); sliderImage.src = `images/${item}`; // Append each item to the DocumentFragment moreImagesHTML.append(sliderItemClone); }); // Finally append DocumentFragment to sliderContent.append(moreImagesHTML);

No estoy seguro de si esta es una forma válida y estándar en JS. Estoy agregando el content de la template que ya es un DocumentFragment a otro DocumentFragment , es decir , moreImagesHTML . ¿Es válido en JS?