Есть ли прослушиватель событий, чтобы проверить, были ли childElements добавлены к элементам

Question

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

<div id="outside">
</div>

, а затем через некоторое время

<div id="outside">
   <div id='inside'>
   </div>
</div>

есть ли способ добавить событиеслушатель, чтобы проверить, когда HTML был изменен?

что-то вроде

page.addListener('#outside', () => {
   console.log('event fired');
}

Answer 1

Вы можете попробовать с MutationObserver

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
    else if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
const targetNode = document.querySelector('#outside');

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

targetNode.insertAdjacentHTML('beforeend', "<div id='inside'>Child</div>"); // Add child
targetNode.classList.add('.child'); // Modify attribute
document.querySelector('#inside').style.marginLeft = '15px';

<div id="outside">Parent
</div>