[voraa]

Просто всякие document.getElementById('read_table');
нормально срабатывают только тогда, когда браузер уже распарсил HTML текст и знает, что это за элемент с id='read_table'.
Когда мы помещаем скрипт в конце body, все элементы уже известны и DOM дерево построено.
Если поместить этот скрипт вначале, то это функция не сработает, т.к этого элемента еще нет.
Но document.addEventListener('DOMContentLoaded', function () {})
говорит - выполни эту функцию, когда произойдет событие "Содержимое DOM готово", т.е все распарсено, все элементы известны.