Доступ к динамическим элементам

У меня есть команда которая удаляет все что есть в контейнере, и класс Card, который при вызове метода render() добавляет в этот самый контейнер карточки товара:

document.querySelector('.es-catalog__cards-container').innerHTML = ''
Card('es-catalog__cards-container').render();

На то что нету слова new перед Card не обращайте внимания.
Важно отметить, что метод render() обращается к json файлу и берет оттудова информацию о карточках товара, типа описания, названия и т.д. После чего, как я уже сказал, добавляет карточки в контейнер, в данном случаю в тег с классом <<es-catalog__cards-container>>.

Задача такова: Мне нужно узнать количество этих карточек в контейнере после того как render() выполнит свою работу.

Я попробовал написать код сразу же после класса:

document.querySelector('.es-catalog__cards-container').innerHTML = ''
Card('es-catalog__cards-container').render();

// Новый код:
let count = document.querySelector('.es-catalog__cards-container').children.length
console.log(count);

И проблема в том что в консоли всегда выводится 0. Это происходит из-за того что методу render() требуется время на обращения к json файлу, на обработку всего этого и т.д. А код который ниже, не дожидается всего этого.

В итоге сперва контейнер очищается, потом метод render() начинает свою работу, а потом весь последующий код обращается к контейнеру и естественно получает 0, так как метод render() еще не успел добавит элементы в контейнер.

Как мне сделать так, что бы код:

let count = document.querySelector('.es-catalog__cards-container').children.length
console.log(count);

дождался выполнения этого кода:

Card('es-catalog__cards-container').render();

Пробовал с помощь callback функции и ничего не сработало. Не исключено что я просто неправильно пользовался callback, так как у меня еще нету опыта в этом. Если вы считаете что мою проблему может решить callback, то напишите пожалуйста свой пример.


Ответы (0 шт):