Почему JS не видит часть HTML разметки?

Question

[Bolharskyi]

Часть разметки генерирует JS при загрузке страницы. Мне нужно в отдельном файле объявить переменную, которая содержит сгенерированную разметку, но JS не находит этот участок в DOM.

Разметка упрощенная.

<div class="content">
     <div class="default">Див, прописанный в разметке</div>
     <div class="custom">Див, добавленный скриптом</div>
</div>

Прописываю в JS:
let custom = document.querySelector('.custom')

В консоли браузера console.log(custom); выдает значение null. Но если в этой же консоли введу document.querySelector('.custom') - получаю нужную разметку.

Проверил порядок подключения скриптов. Первый тот, который генерирует разметку. Второй - который ищет элемент.
Также пробовал так:

document.addEventListener('DOMContentLoaded', function() {
     let custom = document.querySelector('.custom')
     console.log(custom);
})

В этом случае вообще ничего не происходит.

Помогите, пожалуйста, разобраться. Изучаю JS сравнительно недавно, с подобным еще не сталкивался.

Comments

[mletov]

Вроде все верно. В консоль попадает.
Видимо, все-таки что-то не так с порядком подключения скриптов.
Нужен полный неработающий пример.

[Teleweb developer]

Дайте весь код

[Bolharskyi]

Товарищи, загадка разгадана)
Дело в том, что скрипт-генератор разметки использовал свой CSS, а DOMContentLoaded не дожидается загрузки стилей. Помог слушатель события load, который запускает функцию, после загрузки CSS.
Вот так работает:

window.addEventListener('load', function() {
    let custom = document.querySelector('.custom');
    console.log(custom);
})

Спасибо за участие в решении вопроса.

[Noder SS]

У меня с тем же кодом все нормально:

<div class="content">
    <div class="default">Див, прописанный в разметке</div>
    <div class="custom">Див, добавленный скриптом</div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
     let custom = document.querySelector('.custom')
     console.log(custom);
})
</script>

Answer 1

[lagudal]

MutationObserver

Answer 2

[Dimalite]

let content = document.querySelector(".content");

let customDiv = document.createElement('div');
customDiv.innerHTML = "Див, добавленный скриптом";
customDiv.classList.add("custom");
content.append(customDiv) ;

let custom = document.querySelector(".custom");
console.log(custom);