По какому принципу вставлять строку подключение js в структуру HTML?

Question

[Сергей Ракипов]

Не могу понять почему то иногда когда скрипт подключен сверху то он не срабатывает а подключаю снизу все хорошо и наоборот.

Answer 1

[Ivan Ivanovich]

Скрипту нужно дождаться загрузки DOM дерева.
2 решения:

1. Весь js код обвернуть в

window.addEventListener("DOMContentLoaded",function(){

})

или

window.addEventListener('DOMContentLoaded',()=>{

});

2. При подключении скрипта <script src="" defer></script>

Статья

Answer 2

[Александр]

В тот момент, когда скрипт подключается в начале тэга body, то он срабатывает сразу, особенно если в нем нет прослушивания событий load или DOMContentLoaded, то же самое, если подключить скрипт в head. Однако, если подключить скрипт перед закрытием тэга body, то DOM будет уже построен и большая часть будет доступна в скрипте, конечно, если большая часть DOM не строится после загрузки страницы.

Answer 3

[Антон Шаманов]

способы биндинга событий отличаются + ассинхронное выполнение - если ты добавляешь onclick до того как добавить элемент, то не стоит удивляться тому что он не сработал))