Why is the my Alert() function triggering before the Div's set inner HTML is triggered?

Question

I am dynamically populating a list of posts upon a press of a button. I need a particular function (a script that shows an alert) to be run after setting an innerhtml of a div. However, the function that is at the bottom is executed before setting the inner html.

In the below code, I am using a simple alert() instead of my real function. How can I get the alert function to fire only after the innerhtml is set and displayed?

  

  displayPostList(posts){
        const postsDiv = document.querySelector('#posts');
        let output = '';
        posts.forEach((post)=>{
            output += `
            <div class="card mb-3" data-postid=${post.id}>
                <div class="card-body">
                    <h4 class="card-title">${post.title}</h4>
                    <p class="card-text">${post.body}</p>
                    <a href="#" class="edit card-link" data-id=${post.id}>
                        <i class="fa fa-pencil"></i>
                    </a>
                    <a href="#" class="delete card-link" data-id=${post.id}>
                        <i class="fa fa-remove"></i>
                    </a>
                </div>
            </div>`;
        });
        
        postsDiv.innerHTML = output;
        alert("Posts Displayed!"); // this is where my function should execute
       
    }