I'm trying to get a list of data from Firestore to automatically create and nest themselves in divs (one for each topic) I feel like Im close but I don't know what I'm doing wrong...

Here is my code

const querySnapshot = await getDocs(collection(db, "vhf", '1', 'week1'));
    querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots
    //console.log(doc.id, " => ", doc.data());
    });

    querySnapshot.forEach(function(topics){
        // console.log('Topics From Function: ', topics.data().topic)
        
            let html = ''
            const weekData = topics.data();
            const li = `
            <li>
            <div class="topicRungDiv">${weekData.topic}</div>
            </li>
            `;
        html += li
        });

Could someone please help me get this working? I have patched this together from a tutorial and there are no errors with the code... But I don't understand the function of the let html = '' and the html += li

I also dont understand how to tell the code where to put the new <div> tags as id like them to be put into a specific div container.

Any help, amendments or feedback would be greatly appreciated