how to send looped javascript API data to the html webpage?

Question

I have this simple code with 5 paramaters taken from an API that logs data:

for (i = 0; i < arr.length-1; i++) {
        
        console.log('For Calls')
        console.log(arr[i].league.name)
        console.log(arr[i].teams.home.name, arr[i].goals.home)
        console.log(arr[i].teams.away.name, arr[i].goals.away)
}

it logs this data to the console (2 sets of data shown): Logged Data

The issue I am having is trying to display this looped content to the website, I haven't even been able to get it on the screen so far using the .append methods.

Here is the format I am trying to create:

<div class="parentDiv">
    <div class="league">Data goes here</div>
    <div class="team1">Data goes here</div>
    <div class="score1">Data goes here</div>
    <div class="team2">Data goes here</div>
    <div class="score2">Data goes here</div>
</div>

I am aware I can give each div a class and append that way but I need this in a loop so those methods do not work for me in this circumstance.

Any Tips are Appreciated.