testing appendchild vs mutationobservers

const originalAppendChild = Element.prototype.appendChild;

// Chat app simulation: append 100 chat messages
const chatContainer = document.createElement('div');

// Override appendChild
chatContainer.appendChild = function (child) {
    child.style.color = 'red';
    return originalAppendChild.call(this, child);
};

// Append 100 chat messages
for (let i = 0; i < 100; i++) {
    const newMessage = document.createElement('div');
    newMessage.textContent = `Message ${i + 1}`;
    chatContainer.appendChild(newMessage);
}

// Restore original appendChild after the test
chatContainer.appendChild = originalAppendChild;

// Chat app simulation: append 100 chat messages
const chatContainer = document.createElement('div');

// Set up MutationObserver
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1) { // Ensure it's an element
                // Modify the added message
                node.style.color = 'red';
            }
        });
    });
});

// Start observing the chat container for new children
observer.observe(chatContainer, { childList: true });

// Append 100 chat messages
for (let i = 0; i < 100; i++) {
    const newMessage = document.createElement('div');
    newMessage.textContent = `Message ${i + 1}`;
    chatContainer.appendChild(newMessage);
}

// Disconnect MutationObserver and reset changes
observer.disconnect();