JavaScriptで追加された要素に対してJavaScriptの処理を実行する

  • 公開日:

この記事の目次

はじめに

JavaScriptで動的にHTMLの要素を追加して、その要素に対してJavaScriptを実行したい場合があります。このような場合、MutationObserverを用いて実装することができます。MutationObserverは、DOMの変更を検知した時にコールバック関数を実行します。

MutationObserverの使い方

Ajaxでデータを読み込んで表示させる場合、あらかじめHTMLに要素を追加するための「入れ物」を用意しておきます。

<div id="target"></div>

MutationOberverを使って、要素が追加された後にJavaScriptの処理を実行するようにします。#targetへの子要素の追加を検知してJavaScriptを実行したい場合には、以下のように記述します。

var target = document.getElementById('target');
function example() {

// 要素が追加された時に実行する処理

}
var mo = new MutationObserver(example);
mo.observe(target, {childList: true});
  • 2〜6行目:DOMの変更時に実行する関数
  • 7行目:MutationObserverのインスタンスを生成
  • 8行目:observeメソッドでDOMの監視を開始

observeメソッドの第一引数には監視対象のノード、第二引数には監視のオプションを指定します。第二引数については、MDNのリファレンスに詳しい内容が掲載されています。

対応ブラウザ

MutationObserverの対応ブラウザはCan I use…に掲載されています。Internet Explorerだと、10以下には対応していません。