I want to observer a deeply nested element (textarea in this example), but the following code does not work.

can anyone help me out?

<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>