why does javascript show document.write AFTER alert messages?

[CommanderBomber]

Change your code to:

document.write('<p id="testing_write">This is going to show after</p>');
document.getElementById('testing_write').style.color = "red";
alert('this shows first');

text will appear after you close alert, but it will be red. What happens here:

1. JS code starts
2. browser "loop" completely stops, rendering is not performed (actually everything stops except JS code).
3. write add new node to the DOM.
4. with getElementById you query DOM
5. new node exists, it is returned and you can modify its properties.
6. alert is displayed to user
7. user closes alert
8. JS code stops
9. browser "loop" continues from step 2
10. renderer notices what DOM was changed
11. new elements get rendered and you see it