jQueryでscriptタグを追加させるときにハマった
状況把握
状況としては、smartyの、headタグ内でincludeしているファイルを、クリックイベントによって切り替える処理を考えていたとき。処理自体はHTMLに含まれるclassによって条件分岐させて、それによってJSファイルで動作を書いて入力フォームを動かそうというもの。jQueryでHTML要素を追加させようとしてた。
話自体は難しくないが、知らなかったので最初はなんでだろ？って状態だった。イベントを発生させて、動的にHTMLの要素を入れようとしていた。
<link>タグとかはブラウザで検証して、動き見てたら問題なく追加されていたのだが、<script>タグは追加できなかった。
数の問題か？書き方が悪かった？とか最初は思ってて、でも別にカンマで区切って書いてて、特に問題は無いので何が原因なんだろうとか考えてた。
連結とかエスケープで解決
jQueryで動的にscriptタグを生成して実行させる方法（最終閲覧2020/05/20）
JavaScriptの文字列内でscriptタグが書けない！その対処法（最終閲覧2020/05/20）
まあ、この手の問題は大体既にハマっている人がいる。
<script>の追加は、JS書くときにそもそも<script>内に処理書いてるんで、追加しようとしているタグを閉じタグだと認識してエラーが出ているのかと。
対応法は上記のようなサイトで紹介されているが、「"\"」（バックスラッシュ）とか連結とかさせれば大丈夫という話。記事は古いけど、今でも使えるようだ。実際、自分の場合も「"\"」を閉じタグに追加してやったら、動いた。こういう挙動って知らないと本当分からないから、その都度、何でそうなるのかとか、言語の特徴をつかんでおかないと簡単なことでも数時間ハマるから怖い。
$('search').append($('<script>alert("異世界攻略班");<\/script>'));ハマりも無いと覚えないけど、それでも時間は有限だから効率的に覚えていかねば。