innerHTMLで設定したscriptが読み込まれない

Question

以下のコードでscriptタグをinnerHTMLで設定してbodyに追加すると追加はできるもののスクリプトが読み込まれません。

const d = document.createElement('div');
d.innerHTML = `<script src="${src}"></script>`;
document.body.append(...d.children);

[失敗例], [成功例]

innerHTMLをやめて直接scriptタグを作ってappendしたらいいじゃん!?と思われそうですが、
bodyに追加したい要素をhtmlstringで指定する関数を、

function appendHTML(r) {
  const d = document.createElement('div');
  d.innerHTML = r;
  document.body.append(...d.children);
}
appendHTML('<script src="script.js">');

上記のような感じで作成したのですが、scriptタグをappendするとどうやら読み込んでくれないようです。

① なぜ読み込んでくれないのか？
② 上記の関数のような仕組みで読み込んでくれるようにするにはどうすればいいのか？

ご教授お願いします。

Answer 1

１． なぜ読み込んでくれないのか？

【Element: innerHTML プロパティ - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML#セキュリティの考慮事項

HTML5 では innerHTML で挿入された <script> タグは実行するべきではないと定義しているからです。

---

２．上記の関数のような仕組みで読み込んでくれるようにするにはどうすればいいのか？

「innerhtml script」 で Google 検索してみましょう。

【innerHTMLに流し込んだscriptを活性化させる | Rain or Shine】
https://www.rainorshine.asia/2017/03/02/post2722.html

【javascript - innerHTMLに入れたコードの中にscriptタグがあっても実行されないのはなぜ？ - スタック・オーバーフロー】
https://ja.stackoverflow.com/questions/2756/innerhtmlに入れたコードの中にscriptタグがあっても実行されないのはなぜ

Comments

[ypp]

勝手に無効化されていたのですね。
にしても、js側で警告ぐらい出してくれればいいのに…と思いました。
問題発生から解決まで9時間かかったので。

Answer 2

function appendHTML(r) {
  const d = document.createElement('div');
  d.innerHTML = r;
  document.body.append(...[...d.children].map(v => v.tagName == 'SCRIPT' ? (s = document.createElement('script'), s.src = v.src, s) : v));
}
appendHTML('<script src="script.js">');

で解決しました