Потому что html формат разработан для работы по сети и рисования сайта сразу по мере получения информации. Т.е. на медленном интернете во втором случае возможна ситуация, когда script - загрузился, а div ещё течёт по проводам. По этому разбор html документа всегда идёт строго по порядку: на момент запуска твоего script - твоего div не существует, и script, соответственно, ничего о нём не знает.
Либо всегда помещай script вниз, либо жди загрузки кода страницы:
window.addEventListener('DOMContentLoaded', function(){
// твой код
});
либо загрузки всей страницы вместе с картинками, видео и прочим содержимым:
window.addEventListener('load', function(){
// твой код
});
Про document.write забудь. По крайней мере пока не станешь senior.)