Как получить динамически появившееся содержимое тега?

Question

[Eva Ingannamorte]

Мне нужно взять в переменную текст, который появляется в теге лишь через несколько сек. с момента клика на кнопку (сам тег существует изначально).

Я пробовала сделать это с setTimeout:

submitBtns.forEach(function(item) {
  item.addEventListener('click', function() {
      
      setTimeout(function() {
          const successText = document.querySelector('.wpcf7-response-output').textContent;
          console.log(successText);
      }, 5000);
      
  });   
});

Но проблема в том, что в консоль выводится просто пустая строчка. Тег изначально пустой, так что, видимо, берется его изначальное содержание, а не то, что появилось после клика. setTimeout просто отодвигает момент. Так как получить появившийся текст?

Искала инфу про MutationObserver, но не поняла, как его здесь использовать, так что распишите, пожалуйста

Answer 1

[Антон Горецкий]

примерно вот так

// выберите элемент, который вы хотите отслеживать
const targetNode = document.querySelector('.wpcf7-response-output');
let successText;
// создайте экземпляр MutationObserver
const observer = new MutationObserver(function(mutationsList) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // если тип мутации является childList (изменение дочерних элементов), то выполните действия
            successText = mutation.target.textContent;
            console.log(successText, 'in Observer');
        }
    }
});

// настройте параметры наблюдения
const config = { attributes: true, childList: true, subtree: true };

// начните отслеживать элемент
observer.observe(targetNode, config);

const submitBtns = document.querySelector('button');

submitBtns.addEventListener('click', function() {
      // изменяем контент через 3 сек после клика
      setTimeout(function() {
          document.querySelector('.wpcf7-response-output').textContent = 'New content';
      }, 3000);
      
  });

здесь observer это ф-я, которая будет всегда вызываться при изменении контента. Можете в нее добавить дополнительную логику (проверка клика, семафор и др..).

Answer 2

[Rsa97]

Изменение textContent меняет дочернюю текстовую ноду, соответственно вам необходимо в mutationObserver подписаться на изменение childList.