HTML template example

example.js

const episodeList = [{
    name: 'A great show',
    season: 1,
    summary: '<p>Seriously, really good',
    image: 'https://an-image/img.jpg'
},
{
    name: 'Another great show',
    season: 2,
    summary: '<p>Meh</p>',
    image: 'https://an-image/img.jpg'
}]

function renderPage() {
    const rootElement = document.createElement('div');
    for (const episode of episodeList) {
        const episodeWrapper = document.createElement('div');

        episodeWrapper.innerHTML = `
            <div>${episode.name}</div>
            <div>${episode.season}</div>
            <div>${episode.summary}</div>
            <img src="${episode.image} />"
        `;
        
        // For each episode, render the episode
        // const nameElem = document.createElement('div');
        // nameElem.textContent = episode.name;
        // episodeWrapper.appendChild(nameElem);

        // const seasonElem = document.createElement('div');
        // seasonElem.textContent = episode.season;
        // episodeWrapper.appendChild(seasonElem);

        // const summaryElem = document.createElement('div');
        // summaryElem.innerHTML = episode.summary;
        // episodeWrapper.appendChild(summaryElem);

        rootElement.appendChild(episodeWrapper);
    }
}