mohit-raj-purohit/mutationObserver.html

## mutationObserver.html
<!DOCTYPE html>
<html>
<body>
  <ul id="item-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <button id="add-button">Add Item</button>

  <script>
    // Select the target node
    const itemList = document.getElementById('item-list');

    // Create a new MutationObserver instance
    const observer = new MutationObserver(function(mutationsList) {
      // Loop through the list of mutations
      for (const mutation of mutationsList) {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
          // Handle the added item
          console.log('New item added:', mutation.addedNodes[0].textContent);
        }
      }
    });

    // Configure the observer to observe changes to the child nodes of the target node
    const config = { childList: true };

    // Start observing the target node
    observer.observe(itemList, config);

    // Add a click event listener to the "Add Item" button
    const addButton = document.getElementById('add-button');
    addButton.addEventListener('click', function() {
      // Add a new item to the list
      const newItem = document.createElement('li');
      newItem.textContent = 'Item ' + (itemList.children.length + 1);
      itemList.appendChild(newItem);
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<ul id="item-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	</ul>

	<button id="add-button">Add Item</button>

	<script>
	// Select the target node
	const itemList = document.getElementById('item-list');

	// Create a new MutationObserver instance
	const observer = new MutationObserver(function(mutationsList) {
	// Loop through the list of mutations
	for (const mutation of mutationsList) {
	if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
	// Handle the added item
	console.log('New item added:', mutation.addedNodes[0].textContent);
	}
	}
	});

	// Configure the observer to observe changes to the child nodes of the target node
	const config = { childList: true };

	// Start observing the target node
	observer.observe(itemList, config);

	// Add a click event listener to the "Add Item" button
	const addButton = document.getElementById('add-button');
	addButton.addEventListener('click', function() {
	// Add a new item to the list
	const newItem = document.createElement('li');
	newItem.textContent = 'Item ' + (itemList.children.length + 1);
	itemList.appendChild(newItem);
	});
	</script>
	</body>
	</html>