About JavaScript Templates

<div id="posts-container"></div>

<template id="post-template">
    <article>
        <h3></h3>
        <p></p>
    </article>
</template>        

<script>
const blogPosts = [
    {
        title: "Getting Started with Django Rest Framework",
        summary: "Learn how to build powerful APIs using Django REST Framework. This guide covers serializers, viewsets, and authentication to get you up and running quickly."
    },
    {
        title: "Python Virtual Environments Explained",
        summary: "Master Python virtual environments with venv and virtualenv. Understand why isolation is crucial for Python projects and how to manage dependencies effectively."
    },
    {
        title: "Django Models: Relationships and Queries",
        summary: "Deep dive into Django model relationships including ForeignKey, ManyToMany, and OneToOne fields. Learn advanced querying techniques with the Django ORM."
    }
];

function loadPosts() {
    const template = document.getElementById('post-template');
    const container = document.getElementById('posts-container');

    container.innerHTML = '';

    blogPosts.forEach(post => {
        const clone = template.content.cloneNode(true);

        clone.querySelector('h3').textContent = post.title;
        clone.querySelector('p').textContent = post.summary;

        container.appendChild(clone);
    });
}

document.addEventListener('DOMContentLoaded', loadPosts);
</script>