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.