This code is working fine as expected.

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);

I am not sure if this is valid and standard way in JS. I am appending the content of the template which is already a DocumentFragment to another DocumentFragment i.e. moreImagesHTML. Is Valid in JS?