Creating nested divs using javascript

I've successfully created a div using javascript and it's filled with data gathered from an API. I'd like to take part of that data (all the innerHTML text from Episode, SeasonxEpisode, etc.) and place it into a containing div so I can isolate it for css styling.

Here is my code as it is, with everything in the same parent. There is also an image pulled from the API displaying in the episodeDiv, but it is not included in this code snippet because it's not part of the issue.

<script>
let savedResponse;

function clickSeason (seasonNum) {

    const currentSeason = savedResponse['season'+ seasonNum];

    $("#episode-list").html("");

    currentSeason.forEach(function(episode){
        const episodeDiv = document.createElement('div');
        $(episodeDiv).addClass("episodeStyle");

        episodeDiv.innerHTML = 
            "Episode: " + episode.title + '<br />' + '<br />' + 
            "SeasonxEpisode: " + episode.episode + '<br />' + 
            "Original Airdate: " + episode.airdate + '<br />'  + 
            " Stardate: " + episode.stardate + '<br />' + 
            episode.summary;

        $('#episode-list').append(episodeDiv);
</script>

You may see the full project here: http://idesn3535-flamingo.surge.sh/Final/index.html

And the full code is here: https://github.com/bmaxdesign/idesn3535-flamingo/blob/master/Final/index.html

I tried several versions of:

const episodeData = document.createElement('p');
                $(episodeData).addClass("episodeDataStyle");

episodeData.innerHTML = 
                    "Episode: " + episode.title + '<br />' + '<br />' + 
                    "SeasonxEpisode: " + episode.episode + '<br />' + 
                    "Original Airdate: " + episode.airdate + '<br />'  + 
                    " Stardate: " + episode.stardate + '<br />' + 
                    episode.summary;

$("episodeData").appendChild(episodeDiv);

I want the parent node to be the episodeDiv, and then I want to nest episodeData as a child with a separate id to style in css. Unfortunately what I have above actually makes the whole episodeDiv not even show, which I think means there is some error in how I've appended. I think I have some labeling confusion or syntax errors, or all of the above. I'm trying to avoid leaving an empty element in my HTML page, but I'd also be confused with that approach and how to place the text in the empty div. I'm clearly not understanding DOM manipulation yet.

Please make sure your responses include a why and how, and any keywords or links that I could use to better understand this in general. Teach a man to fish, etc. Thank you so much!!

Solution

I like to use template literals and Array.map to achieve what you want to do. There are many ways to skin a cat, but this is pretty compact and readable.

// map the episode objects into strings of html
var episodeHTMLArray = currentSeason.map(episode => {
    return `
        <div class='episode'>
            Episode: ${episode.title} <br /> <br />
            SeasonxEpisode: ${episode.episode} <br />
            Original Airdate: ${episode.airdate} <br />
            Stardate: ${episode.stardate}<br />
            ${episode.summary}
        </div>
    `
})

// join the array of html into a plain string
$('#episode-list').html(episodeHTMLArray.join(''))

Template literals are backticks instead of quotes, and they can render any variable in the current scope by using the syntax ${varName}.

Also, I think I should point out that $("episodeData") is looking for an element that looks like <episodeData></episodeData>. Careful with your selectors.