Observer

by Chris

HTML

<div id="container"></div>
<button id="add">Add Message</button>

JavaScript

function testObserverTrigger() {
  const target = document.querySelector('#container');

  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      mutation.addedNodes.forEach(function(node) {
        if (
          node.nodeType === 1 &&
          node.matches(".message-bubble")
        ) {
          console.log('✅ Observer fired for:', node.textContent);
        }
      });
    });
  });

  observer.observe(target, { childList: true });

  console.log('👀 Observing #container for .message-bubble inserts');
}

testObserverTrigger();

document.getElementById('add').addEventListener('click', () => {
  const bubble = document.createElement('div');
  bubble.className = 'message-bubble';
  bubble.textContent = 'Test Message: ' + new Date().toLocaleTimeString();
  document.getElementById('container').appendChild(bubble);
});