DOMで生成した要素にテキストを挿入したい

Question

###前提・実現したいこと
jQueryでloadしたDOM要素へ、読み込み後にテキストを挿入したいと思っています。

###発生している問題・エラーメッセージ
挿入したいテキストが表示されません。

###該当のソースコード
① 外部ファイルからソースを読み込み

$("#incbox").load("inc.html #sample");

※ <span id="text"></span> が読み込まれます。

② 読み込み後にテキストを挿入

$("#text").text("サンプルテキスト");

###補足情報
① は読み込まれていることを確認しています。
DOM で生成したものに挿入したいんですが、どうしたらいいかお教えいただきたいです。
よろしくお願い致します。

Answer 1

おそらくですが、#textへの書き込みのタイミングが早すぎて、まだロードされていないうちに実行されてしまうのが要因かと思います（.load()は非同期で実行されるので、次の行はロード前に動いてしまいます）。

.loadは完了時のコールバックを取れますので、そこで実行しましょう。

$("#incbox").load("inc.html #sample", function(text, status, xhr){
  if(status !== 'success')return;
  $("#text").text("サンプルテキスト");
});

Comments

[suke]

ありがとうございます、バッチリ書き込みできました！
本当にありがとうございました！！