Расширение Google Chrome: выполнение кода не происходит внутри цикла jquery for в файле .js, но код цикла работает в кон ⇐ Jquery

[Гость]

Я работаю над своим первым расширением для Google Chrome, и в моем JS-файле есть код, который выглядит примерно так:

$(function() { console.log("привет"); $(".panel").css("цвет фона", "синий"); $(".panel .list-group .list-group-item").each(function(index, element) { console.log("в"); const redoButton = document.createElement("кнопка"); redoButton.textContent = "Нажмите здесь"; $(элемент).append(redoButton); }); }); Однако, когда я загружаю свое расширение и просматриваю журнал консоли, появляется только hello, а цвет фона меняется на синий.

in не отображается, и кнопки не добавляются, что означает, что не достигается только внутренняя часть цикла for.

Нет ошибок в консоли и на странице расширений.

Я вставляю код цикла for в консоль браузера Chrome, и он работает как положено, in выводится на консоль для каждого элемента, и кнопка добавляется к каждому предмет.

Почему код работает в консоли, но не в моем JS-файле? Код перед циклом for работает, поэтому мне интересно, почему он вообще не входит в цикл for.

Редактировать: РЕШЕНО

Комментарий @collab-with-tushar-raj помог мне понять, что разные элементы DOM загружаются с разной скоростью. Элемент .panel загрузился быстро, поэтому код в строке 3 выполнился должным образом, но затем загрузка элементов .list-group .list-group-item заняла больше времени, поэтому for часть цикла сценария, выполняемая до загрузки этих элементов.

Я добавил следующий код window.addEventListener('load', function() { //ваш скрипт , чтобы гарантировать, что цикл for выполняется только после завершения загрузки всей страницы
р>