JavaScriptのappendChild()とjQueryのappend()で挙動が異なる

Question

実現したいこと

JavaScriptからjQueryへの書き換えが、挙動の違いにより期待通りにできません。

問題の箇所だけJavaScriptのままにすることはできますが、可能であればjQueryに書き換えたいと思いますので、書き換え方がわかりましたらご回答願います。

また、書き換え方でなくても挙動の違いについての情報がありましたらコメント頂けると幸いです。

前提

前の質問の続きになります。
「動的に読み込むJavaScriptの実行が完了したタイミングで処理をしたい」
https://teratail.com/questions/113kp7s0kssjvg

発生している問題・エラーメッセージ

head要素にscript要素を動的に追加した場合、JavaScriptのappendChild()だとloadイベントが発生しますが、jQueryのappend()だと発生しません。

該当のソースコード

const message = 'debug mode'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(async () => {
  const $script = $('<script />').prop('src', './debug.js')
  const promise = new Promise(resolve => $script.on('load', () => { console.log('on load'); resolve() }))
  $('head').append($script) // jQuery
  //document.head.appendChild($script[0]) // JavaScript
  await promise
  console.log(message)
})
</script>
<button onclick='console.log(message)'>click</button>

index.htmlをブラウザで開くとコンソールに'on load'と'debug mode'が出力されてほしいですが、いずれも出力されません。
ボタンクリック時には'debug mode'が出力されます。

試したこと

jQueryの行をコメントアウトしてJavaScriptの行のコメントを解除すると期待通りに動作します。

補足情報（FW/ツールのバージョンなど）

Windows10 Pro
Chrome 108.0.5359.126

Comments

[int32_t]

append()の場合、ブラウザの開発者ツールのコンソールに何かエラーは出ていますか?

[gosaro]

いいえ、出ていません。

Answer 1

jQuery の append() などで <script> を挿入する場合、jQuery は内部でおかしなこと(*1)をしていて、load イベントは起きません。よって、load イベントを使う方針では「スクリプトがロードされた後に実行する」という処理は実現できません。
append() はスクリプトの実行が終わってから返ってくるのでやりたい処理を単純に下に続けてもいいですし、$.getScript() も使えます。

*1: 同期XHRでソースを取ってきてeval()しているとのこと

問題の箇所だけJavaScriptのままにすることはできますが、可能であればjQueryに書き換えたい

既に非 jQuery で動いているコードを jQuery に書き換えるのはやめましょう。実行スピードは間違いなく落ちますし、今回のような余計なトラブルになることがあります。

Comments

[gosaro]

詳しい回答ありがとうございます。

＞append() はスクリプトの実行が終わってから返ってくる

恐らくこれは正しくありません。
確かに例示したようなローカルの小さなスクリプトではうまくいきましたが、リモートの大きなスクリプトではエラー（xxx is not defined）になりました。
この場合でもボタンは正常に動作しますので、非同期でスクリプトの実行が終わる前に次の処理に進んでいるものと思われます。

＞$.getScript()も使えます。

これはまさに私が知りたかったことそのものです。
これを使って書き換えることにします。

Answer 2

var message="nodata";
$(function(){
  const script = $('<script>').attr('src', 'debug.js');
  console.log(message);
  $('head').append(script);
  console.log(message);
});

debug.js

message="debug mode";

Comments

[gosaro]

回答ありがとうございます。

前提に書くべきでしたが、動的に読み込むスクリプトの中にはCDNで公開されているものも含まれます。
そのため、外部スクリプトの変更が必要になる方法は採用できません。

また、int32_t様からの回答へのコメントにも書きましたが、この方法ではリモートの大きなスクリプトを読み込む際に期待通りに動作しないと思われます。

[yambejp]

誤解があるようですが、質問のしかたで外部からconstでグローバル変数を受け渡しているのでそれがどのタイミングでかきかわるか提示したのですがわかりづらかったですね？
$(function(){
const script = $('<script>').attr('src', 'debug.js');
$('head').append(script);
console.log(message);
});
で参照できるはずです。
とはいえ外部からconstを呼ぶのは競合しそうですしmoduleとかでやる処理かもしれないですね