「要素の出現を検知する」というJSはありますか？

Question

###質問
要素の出現を検知するまで監視を続けて、検知したら監視が終わる。というようなJSはありますか？

###例
たとえばこのように#targetが1秒後に出現するとして、

<p id="space"></p>

setTimeout(function(){
  $('#space').prepend('<span id="target">target出現！</span>')
},1000);

上の出現を検知したいと思っています。

検索すると次の書き方があった（https://www.neko-it.com/blog/4381.html）のですが動作せず、良い方法をご存知の方がいらっしゃいましたら宜しくお願い致します。

setTimeout(function(){
  $('#space').prepend('<span id="target">target出現！</span>')
},1000);

$("#target").onReady(function(e){
  alert("targetを検知しました！");
});

Comments

[m.ts10806]

「動作せず」だと何が起きたのかわかりません。エラーメッセージ等発生しているのでしたらブラウザ開発ツールコンソールに表示されているはずなので、その内容をご提示ください。動かないには何かしら理由があるので、例えば環境要件、jQueryのバージョン、htmlなども整合性がとれいているかご確認ください。

[m.ts10806]

「というようなJSはありますか？ 」という聞き方は質問としてはよろしくありません。プラグインを探しているのか、自身で組むのか方向性が不明になります。実際に組まれたコードで試行錯誤したいのであれば聞き方を変えたほうが良いかと思います。

[minminzemkun]

ありがとうございます。今回は別の方が意図を汲んでくださいましたが、仰るご指摘は今後の質問に活かします。

Answer 1

MutationObserver とか。

【MutationObserver - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver#MutationObserverInit

【JavaScriptのMutationObserverでDOMの変化を監視する方法】
https://qiita.com/munieru_jp/items/a6f1433652124a2165e4

【DOMの変更を監視するにはMutationObserverを使う – おかかウェブ】
http://okakacacao.wpblog.jp/technology/mutation-observer

Comments

[minminzemkun]

これは便利ですね。最後にご紹介頂いたページが一番わかりやすかったです。どうもありがとうございます。

[minminzemkun]

良い情報ありがとうございます。「指定要素の子が変化したことを検知」はできました。しかしその検知が早すぎまして、「指定要素の子の子の子の中に要素が出現したことを検知」よりも前にイベントが発生してしまいます。

そこでお聞きしたいのですが、「指定要素の子が変化したことを検知」でなく、「指定要素が出現したことを検知」という方法はございませんでしょうか？

何度も申し訳ございません。

[kei344]

「指定要素の子の子の子変化したことを検知」に変えればよいでしょう。
多分別質問のWordPressのバーの話だろうけど、それはPHP側で出力を変えるほうが早いですよ。

[minminzemkun]

はい。確かに当初はWordPressのバーのための質問でしたが、あちらはひとまず解決いたしました。
そして今回頂戴したご回答は別の部分で使いたくなったので、改めて挑戦しております。

[kei344]

では問題を再現できるコードを提示した上で新たに質問されてはいかがでしょうか。

[minminzemkun]

>「指定要素の子の子の子変化したことを検知」に変えればよいでしょう。

私ではその方法に思い至りません…。

【概要】
実は、「指定要素の子たち」はみな、「指定要素」の変化として生じます。
つまり、検知イベントの対象として「子」を指定することができません。
よって、「子の子」にイベントが効かないのです。

以下、詳しく具体例でご説明させて頂きます。

【具体例】
まず「指定要素」として「A」があり、
指定要素「A」→ 子「B」→ 子「C」
という順序で要素が出現します。イベントを掛けたいのは「C」です。

そこで仰るように「B」を「指定要素」とすればいいか？と考えるのですが、「B」は「A」の後に出現するため指定することができません。

かといって「A」を指定しても、イベントは「B」と「C」の間で生じてしまうために、「C」にイベントを効かせることができないのです。

わかりにくくてすみません。伝わるでしょうか？

[minminzemkun]

>では問題を再現できるコードを提示した上で新たに質問されてはいかがでしょうか。

そうですね。失礼致しました。

[minminzemkun]

すみません、上のごちゃごちゃした内容は忘れてください。
構造だけ真似て別の場所で試したら、どこまで子が深くてなってもイベントは有効でした。できないのは別の原因のようです。ありがとうございました。