*information Note *
song_list -> is empty container initially.

My question is when i am running this code and watching the output in console it is giving me the container filled with cards even my loop is not executed if you see output of 9th line. why i am getting this even my loop is not started yet.*

async function main()
{   
    // get the list of new songs
    var songs_links = await songs();
    console.log(songs_links);

    var  i =0;
    var song_list = document.querySelector(".songs-container");
    console.log(song_list);
    console.log("executed")
    for (let iterator of songs_links) {

        var name  = ((iterator.split("/songs/")[1]).split(".mp3")[0]).replaceAll("-"," "); // we just removed unwanted things from links to create name from it
        // console.log(name)

        // adding the template in HTML
        var k = ` <div class="songs-card rounded card${i}">
        <div class="flex " style="min-width: 118px; justify-content: space-between; align-items: center; gap:10px">
        <div><i class="fa-solid fa-music"></i></div>
        <ul>
          <li class="song-name">${name}</li>
          <li class="artist-name"><p>Artist</p></li>
        </ul>
        </div>
        <button class="card${i}-song songs-btn" style="background-color: transparent; border-style: none; cursor: pointer;" link=${iterator};><img src="play-song.svg" class="invert-color" alt=""></button>
      </div>`;
      
    //   add the template including the previous templates
      song_list.innerHTML = song_list.innerHTML + k;
    console.log("executed")
      i++;
    }
   

}

main();

main();`
**when i run this code the output of line console.log(song_list) should give me empty container instead it giving me the output which only comes after running of for loop. irony is loop executes after the statement . Anyone plz help me to understand the mistake.
**