Как получить элемент, только что добавленный из рендера mustashe через innerHTML?

Question

[CarloMarlo]

есть функция которая рендерит на страницу некий HTML как получить его DOM так как строка
console.log(document.getElementById('helpdesk'));
естественно выдает null, функция mainUtilites.mustasheItemABuild заполняет указанный блок HTML по усатому шаблону при помощи innerHTML

helpdeskCreate: function (data, callbackLoad) {
        let dataBuild = {
            id: 'helpdesk',
            title: 'FAQ',
            description: data
        };

        mainUtilites.mustasheItemABuild('hd__modal_container', '/site/get-template/?tmp=modal', dataBuild);
        //инициализация модального окна
        userUI.modalUIInit('hd__modal_container');
        console.log(document.getElementById('helpdesk__modal'));
        callbackLoad.empty();
    },

Comments

[Aetae]

Гулг ничего не знает о методах с именами типа "mustasheItemABuild", значит это самописная\проприетарная херня, а значит тебе самому с ней и разбираться. Мы понятия не имеем что делают все эти твои методы.
Навскидку куда-то можно тут передать callback.

[CarloMarlo]

поэтому я указал, что mainUtilites.mustasheItemABuild можно просто рассматривать как вставку HTML как простой document.getElementById('hd__modal_container').innerHTML = "некий HTML к которому нужно получить доступ из JS"

[Сергей Сергей]

Должно быть легко разобраться

с сайта developer.mozilla.org

function waitFor(selector, callback, timeout) {
  const element = document.querySelector(selector);
  if (element) {
    callback(element);
  } else {
    if (timeout) {
      return window.setTimeout(() => {
        return window.requestAnimationFrame(() => {
          waitFor(selector, callback);
        });
      }, timeout);
    }
    return window.requestAnimationFrame(() => {
      waitFor(selector, callback);
    });
  }
}

[CarloMarlo]

Сергей Сергей, да я рассматривал такое решение, но используя его в прошлых проектах, не отпускало чувство, что решение не элегантно. Думал есть менее замороченные решения для получения данных в одном потоке. Хотя работает.

[Сергей Сергей]

Ну промисификацию со всеми async/await можно сделать, людям нравится.

[Aetae]

CarloMarlo,

поэтому я указал, что mainUtilites.mustasheItemABuild можно просто рассматривать как вставку HTML как простой

Нельзя. Иначе твой код сразу бы работал и вопроса бы не возникло.

Вместо колхоза с таймаутами есть MutationObserver. Это тоже колхоз, но хотябы официальный. Единственный адекватный вариант - разобраться с имеющимся кодом и api и использовать имеющиеся, ставлю бороду Вассермана, там для этого методы.

Answer 1

[CarloMarlo]

function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
    let startTimeInMs = Date.now();
    (function loopSearch() {
        if (document.querySelector(selector) !== null) {
            callback();
            return;
        }
        else {
            setTimeout(function () {
                if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
                    return;
                loopSearch();
            }, checkFrequencyInMs);
        }
    })();
 },