jQuery・javascriptにてある要素が表示された後に実行したい

Question

jQuery、javascript等で
以下のHTMLの li の要素がブラウザ上に表示されてから実行する
という書き方はどのように書けばできますでしょうか。

条件として、デフォルトのhtmlでは、ulのみでliがない状態で、
liの要素は、ページの更新が完全に終わって少ししてから表示される、といった感じです。

以下のscriptのように、
$(window).load(function()
でページを読み込んでから実行する方法では、それよりもliが表示されるのが後なので、動作しませんでした。

方法を教えていただけないでしょうか。よろしくお願いいたします。

<ul class="sample">
   <!--このli要素は後から表示されます-->
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
   <li>test</li>
</ul>

<script>
$(window).load(function() {
   $('.sample li').css("background","#000");
});
</script>

Answer 1

「Qiita:動的に追加されるDOM要素に対応する方法あれこれ」で開設されているように、DOMInsertedイベント、MutationObserver、アニメーションを使った回避方法のいずれかの方法で追加された時のイベントを拾って処理を実行すればいいかと思います。

Comments

[yukabyo]

turbgraphics200様

ご回答ありがとうございます。
今回は、li要素を追加するコード側のほうで、liの追加処理が完了時に
$('.sample li').css("background","#000");　を追加したところ
上手く動きました。
参考URLもありがとうございました。今後の参考に致します。

Answer 2

「このli要素は後から表示されるコード」を出して下さい。
一応、MutationObserver がありますが、基本的にはli要素を追加するコード側で何とかする方が良い実装だと思います。

MutationObserver (DOM4 / DOM Standard)

DOM4 で MutationEvent の後継として用意されたAPIです。
IE10- では使用できません。

• MutationObserver - Web API インターフェイス | MDN
• Mutation Observer - Can I use...

MutationEvent (DOM L3 Events)

DOMNodeInserted 等の MutationEvent 系は後継の DOM Standard で削除されました。
これらは MutationObserver に置き換えられています。

• 8.4.1. Interface MutationEvent - UI Events
• 7.1. DOM Events - DOM Standard 日本語訳

Re: yukabyo さん

Comments

[yukabyo]

基本的にはli要素を追加するコード側で何とかする方が良い実装だと思います。 とのことで、
liには、インスタグラムの画像一覧を出すコードを書いていたので、その最後の完了時の処理部分に
$('.sample li').css("background","#000");　の部分を追加したところ
上手く動きました。
MutationObserverの方も今後何かの参考にします。ありがとうございました。

[yukabyo]

think49様
追記の情報、ご丁寧にありがとうございました。

Answer 3

$(document).ready(function() で。

Comments

[yukabyo]

ご回答ありがとうございます。
ですがそれでは動作しませんでした。。

[katsuya141]

$('.sample li').onload では？
こちらも参照。https://teratail.com/questions/61590

[mukkun]

恐らく後からJavaScript側でappendしているのではないでしょうか。
その場合、基本はコールバック関数を使用するか、追加後にいじくってあげる必要があります。

[yukabyo]

katsuya141様
mukkun様

ご回答ありがとうございます。
今回は、li要素を追加するコード側のほうで、liの追加処理が完了時に
$('.sample li').css("background","#000");　を追加したところ
上手く動きました。皆様のご回答も今後参考に致します。ありがとうございました。