Populate site with template generated posts

Hi!

I have a site with a hardcoded grid of instagram-like posts. I have to populate this section of a site with posts generated from template with Javascript.

So far I’ve figured out that the best way to do so may be with .replaceChildren.

const postGrid = document.querySelector("#post-grid");
const post = document.querySelector("#post");
const posts = document.getElementsByClassName("post");

document.body.onload = addInitialCards;

function addInitialCards() {
  const postTemplate = document.querySelector("#post-template").content;

  postGrid.replaceChildren(postTemplate);
}
    <template id="post-template">
      <article class="post">
        <img
          src="./images/poi.jpg"
          alt="some_poi"
          class="post__picture"
        />
        <div class="post__fit-title">
          <h2 class="post__title">poi_name</h2>
          <button class="post__like-button" type="button"></button>
        </div>
      </article>
    </template>

the question is - how do I generate array of these new template-made posts? I also have an object with images and titles for them - these have to be used in the new posts.

im not sure if you have tried using ‘array’ for them and run a loop to do so for each of them instead?!

and may be a re-render everytimes a new ‘post’ shows up or any changes occurs…