JQueryの代わりに MutationObserver を使って子要素の追加を検知したい

書いてみたコード

function printEl(el, indent = "") {
    console.error(indent + "tag=" + el.tagName + " ,id=" + el.id + " ,class="+ el.className);
    el.childNodes.forEach((child) => {
        printEl(child, indent + "  ");
    });
}

function watchChildElementAdditions(target){
    if ( target == null || typeof(target) == "undefined") {
        console.error("監視するノードが指定されていません");
        return;
    }

    // オブザーバインスタンスを作成
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if ( mutation.type != "childList" ) {
                return;
            }
            mutation.addedNodes.forEach( el => {
                printEl(el);
            });
        });
    });

    // 対象ノードとオブザーバの設定を渡す
    observer.observe(target, {
        attributes: false,
        characterData: false,
        childList: true,
        subtree: true,
    });
}

watchChildElementAdditions(document.getElementById('target-id'));

やっていること

MutationObserver で対象ノードの子孫も含めて監視します。子孫のノードが追加されると、 MutationObserver のコンストラクタに指定したコールバックが呼ばれ、 MutationRecordが引数で渡されます。これの addedNodes プロパティに追加された子ノードがあるので、childNodes で子孫を探していきます。

addedNodes 追加されたノードの最上位の親が渡されます。