Quiero observar un elemento profundamente anidado (área de texto en este ejemplo), pero el siguiente código no funciona.

¿Puede alguien ayudarme?

 <div id="parent" style="width:500px;height:200px;" class="parent mother"> </div> <button id="button" style="width:200px;height:60px;" class="button btn"></button> <script> button = document.getElementById("button"); const observer = new MutationObserver(function(mutations_list) { mutations_list.forEach(function(mutation) { mutation.addedNodes.forEach(function(added_node) { if (added_node.className == 's-JGcg fFOiLQ JhFYDw T9BsEA _01h2nw') { //if (added_node.id == 'child') { console.log(`${added_node}has been added`); observer.disconnect(); } }); }); }); observer.observe(document.querySelector("body"), { subtree: true, childList: true, }); button.addEventListener("click", fn); function fn() { document.querySelector("#parent").innerHTML = `<div><div><div> <textarea class="s-JGcg fFOiLQ JhFYDw T9BsEA _01h2nw" placeholder="What happens" rows="5"></textarea> </div></div></div>`; } </script>