jQueryにて、<div>の中にJavaScriptコードを挿入して実行したい

Question

前提・実現したいこと

質問タイトルの通りですが、特定の<div>に対してJavaScriptコードを挿入し、それを実行できるようになりたいのです。

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

下記のソースを使ってWebブラウザで表示すると、Webブラウザのデバッガで
「Uncaught SyntaxError: Unexpected identifier」というエラーメッセージが表示されます。
※該当箇所は、下記ソースの「 $('#mainContent').html」の行

該当のソースコード

...

<div id="mainContent" class="container-fluid"></div>

...

<script>
    jQuery (($) => {
        $('#mainContent').html ("<script>alert('TEST!!!');</script><h3>TEST TEST </h3>");
     });
</script>

...

試したこと

「html」メソッド以外に「append」「text」を試しましたが、エラーメッセージが「Uncaught SyntaxError: Invalid or unexpected token」に変わりました。

mainContentのdivに、直接<script>～</h3>を記述すると当然ながら動作し、エラーも出ません。

「alert」によりメッセージを表示させることが必須で、どなたかお分かりの方がいらっしゃるのなら、ご協力をお願いできませんでしょうか。

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

jQuery 3.4.1

Comments

[Lhankor_Mhy]

文法上無理なんじゃなかったかな……と思います。
詳しい人が仕様書を調べてくれるはず。

Answer 1

こうすれば回避できるかと思います。　　

$('#mainContent').html ("<script>alert('TEST!!!');</"+"script><h3>TEST TEST </h3>");

---

参考：

The easiest and safest way to avoid the rather strange restrictions described in this section is to always escape an ASCII case-insensitive match for "<!--" as "<!--", "<script" as "<\script", and "</script" as "</script" when these sequences appear in literals in scripts (e.g. in strings, regular expressions, or comments), and to avoid writing code that uses such constructs in expressions. Doing so avoids the pitfalls that the restrictions in this section are prone to triggering: namely, that, for historical reasons, parsing of script blocks in HTML is a strange and exotic practice that acts unintuitively in the face of these sequences.

HTML Standard

Comments

[tetakaha759]

ありがとうございます！！
「</script>」を「</"+"script>」とすることで、動作するようになりました！！

なんと、、「/」で引っかかっていたとは、、本当に目からウロコです。。。

[think49]

以下、参考情報。
"</"+"script>" のサンプルコードを良く見かけますが、</script> という文字列がHTML文書内に出現することがトリガーなので、

- "\u003c/script>" のようにUnicodeエスケープしても回避可能です(文字列連結しなくて良い)
- 外部スクリプト化すればこの制約はありません

今はほぼ見かけませんが、XHTMLでは制限が更に厳しいですね。