How to make the HTML renders before the alert is triggered?

You need to defer execution of the blocking alert so the browser can re-render the changed DOM. You can do this with setTimeout and a 0ms timeout:

$('#change').click(function(){
  $('#test').text('new content');
  setTimeout(function() {
    alert('how to make this alert shows after the div changes its content?')
  },0);
})

---

It is worth noting, however, that the specification for alert says to only

Optionally, pause while waiting for the user to acknowledge the message.

So while I’ve personally never seen a user-agent treat it as non-blocking, the specification does allow for it.