Отследить появление элемента

[Timurkin]

Нужно прокидывать цель в метрику после отправки формы.
Пытаюсь привязаться к событию после того как форма отправлена, в модальном окне появляется:

<div class="wpforms-confirmation-container" id="wpforms-confirmation-1113"><p>Спасибо, что написали нам! Мы свяжемся с вами в ближайшее время.</p>
</div>

Делаю так:

if (document.querySelectorAll("#wpforms-confirmation-1113").length > 0) 
{console.log("форма отправлена");
}

Но не срабатывает

[ksa]

Делаю так

Вполне может быть, что на момент проверки элементов просто нет.

Так же можно напомнить что:
- ИД должен быть уникальным на странице и querySelectorAll можно и не применять к селектору идентификатора.
- Если важен сам факт наличия элементов, можно укоротить условие

document.querySelectorAll("селектор").length

Этого будет достаточно.
Или вообще вот так

document.querySelector("селектор")

[Timurkin]

Вполне может быть, что на момент проверки элементов просто нет.

А как тогда написать, нужен прослушиватель event listener ?

[ksa]

нужен прослушиватель event listener ?

Как вариант, использовать наблюдатель - MutationObserver.
Работа с ним хорошо описана в здешнем учебнике - https://learn.javascript.ru/mutation-observer

[Timurkin]

Как вариант, использовать наблюдатель - MutationObserver.
Работа с ним хорошо описана в здешнем учебнике - https://learn.javascript.ru/mutation-observer

Спасибо, нашел код, работает:

function handleMutation(mutationsList, observer) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      for (const addedNode of mutation.addedNodes) {
        if (addedNode instanceof HTMLElement && addedNode.classList.contains('wpforms-confirmation-container')) {
          console.log('Появился новый элемент');
          observer.disconnect();
        }
      }
    }
  }
}
const observer = new MutationObserver(handleMutation);
observer.observe(document.body, { childList: true, subtree: true });

Единственное, не могу понять, как проверять не на класс, а на id ?

[ksa]

как проверять не на класс, а на id ?

Еще проще

addedNode.classList.contains('wpforms-confirmation-container')

Заменить на

addedNode.id === 'нужный_ИД'

[Timurkin]

ksa, все работает, спасибо)