【JavaScript】動的に追加される要素の出現時に特定の処理を行う方法

time 2019/07/31

今回はwebエンジニアっぽくJavaScriptのお話です。
以下のようなHTMLがあったとして、

<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <h1>アザラシのホームページ</h1>

        <div id="azarashi">
        </div>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script>
            $(function() {
                setTimeout(function() {
                    $('#azarashi').append('<p class="goma1">ゴマフアザラシ</p>');
                }, 300);
            });
        </script>
    </body>
</html>

ここで言うゴマフアザラシのような「後から動的に追加される要素」を検知し、何か処理を行いたい場合があります。
クリックのようなイベントであれば、静的要素にon()でハンドラを追加することで実現できますが、「特定の要素が出現したとき」には使えません。
要素が出現するまで無限ループでチェックし続ける方法もありますが、あまり綺麗とは言い難いですよね。

こんな時はMutationObserverクラスを使うといい感じに実装できます。

$(function() {
    let mutationObserver = new MutationObserver(function() {
        if ($('#azarashi .goma1').length) {
            $('#azarashi .goma1').append("<p>ゴマ模様が特徴のアザラシ</p>");
            mutationObserver.disconnect();
        }
    });

    mutationObserver.observe(
        document.getElementById('azarashi'),
        {
            childList: true,
            subtree: true
        }
    );

    setTimeout(function() {
        $('#azarashi').append('<p class="goma1">ゴマフアザラシ</p>');
    }, 300);
});

observe()の第2引数に指定できるオプションは様々です。詳しくはMDNドキュメントを参照してください。

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

この例ではChildListを指定し、子の要素数が変化したらコールバック関数を実行するようにしました。
コールバック関数内で目的の要素が出現したか確認し、あれば任意の処理を行いつつ、observerの監視を停止します。