動的に生成されたテキストを監視する

下記のように、テキストが追加されたことをJquery上、監視することは可能でしょうか？
$('#hoge').on('change',function(){...
では検査できませんでして。。。
これを監視することは可能でしょうか？

小生、まだHTMLにもそれほど明るくなく、::after == $0についても
chromeのディベロッパーツール上、どのようなものか明確にわかってはないのですが
おそらく、動的に生成されたテキストかと理解しております。

よろしくお願いもうしあげます。

HTML
1<span id="hoge"></span>
2
3<span id="hoge">
4fuga
5::after == $0
6</span>

行動規範の内容に同意します

回答3件

JavaScriptのMutationObserverでDOMの変化を監視する方法
↑が参考になると思います。

ただ、目的が提示されていないので詳細は分かりかねますが、手段を間違っている気配を感じます。

投稿2017/12/21 00:28

Lhankor_Mhy

総合スコア36104

SugiuraY

2017/12/22 03:06

コメント有難うございます。無事解決することができました。

行動規範の内容に同意します

MutationObserverで可能です。

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

今回の例なら、

HTML
1<div>
2 <span id="hoge"></span>
3 <button type="button" id="add">add</button>
4</div>

JavaScript
1const mutationObserver = new MutationObserver((mutations, observer) => {
2  for (let mutation of mutations) {
3    console.log(mutation.addedNodes[0]); // "fuga"
4  }
5});
6mutationObserver.observe(document.getElementById('hoge'), { childList: true });
7
8$(document).on('click', '#add', function(event) {
9  $('#hoge').append(document.createTextNode('fuga'));
10});