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

Question

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

Я пробовала сделать это с 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

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

Как вариант, использовать слежение за изменением DOM. В моем примере текст будет возвращен "по запросу" как только он (текст) появится:

const os = document.querySelector('p span')
setTimeout(_ => {
  os.textContent = 'вот и текст'
}, 5000)

document.querySelector('button').addEventListener('click', _ => {
  text()
    .then(txt => console.log('Текст получен', txt))
    .catch(console.log)
})
//
function text() {
  return new Promise((resolve, reject) => {
    const v = os.textContent
    if (v) return resolve(v)
    const observer = new MutationObserver(mutation => {
      //console.log(mutation)
      const v = mutation[0].addedNodes[0].wholeText
      resolve(v)
      observer.disconnect()
    })
    const config = {childList: true}
    observer.observe(os, config)
  })
}

<p>Тут будет текст через 5сек <span></span></p>
<button>Получить текст</button>

БЛОГ НА HUSL

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

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