Javascriptで二重にクォーテーションマークを記述してもブラウザで認識されない理由?

Question

前提・実現したいこと

JavascriptでDjangoのテンプレート制御文をHTML内に追記しようとしています。
正しく追記されているように見えるのですが、GoogleChromeで認識されないようで、その理由がわからず困っております。

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

Javascript

var text = '<div id="add-text"><img src="{% static \'img/image.gif\' %}"></img></div>';
$("body").append(text);

この文字列を、console.logで出力したり、HTMLのソースコードを見ると、
意図したとおり
<div id="add-text"><img src="{% static 'img/image.gif' %}"></img></div>
と記述されています。

ところが、ブラウザの方では、

http://127.0.0.1:8000/appnaame/%7B%%20static%20'img/image.gif'%20%%7D not found 

とエラーが出ていて、srcが正しく表示されません。
つまり、{%%}の部分が認識されずに、文字コードに置き換わって解釈されているようです。

エスケープすれば良いと考えていましたが、さらに何かしなければいけないのでしょうか？

補足情報（Django2.0, Python3.6, Windows10 VSCode, Chrome）

Answer 1

JavascriptでDjangoのテンプレート制御文をHTML内に追記しようとしています。

Djangoを使った処理の流れは、「サーバサイドでDjangoの処理を行う」→「それをブラウザに転送する」→「ブラウザに送られたHTMLの上でJavaScriptが動く」となっています。

つまり、（ビューにJavaScriptを書いて事前にDjangoで処理させるという方法を取らない限り）JavaScript内にDjangoのテンプレートを書いても反映されません。

Comments

[donadona]

早急にご回答いただきありがとうございました。

制御文を解釈しているのはブラウザではなくDjango(Python)なので、言われてみればそうですね。

ということは、現在のアプリケーションのディレクトリからの相対パスで記述するのが良いでしょうか？
（それでひとまずうまく行きました。）

Answer 2

もしかして、外部JSファイルにこんな書き方してるんですか？
もしそうなら動くわけないでしょ！！

しかし、本文を読む限りだとHTMLのscriptタグ内に下記のようにべた書きしているように思えますね。
なので表示されないのはちょっと不可解ですね。

<script>
var text = '<div id="add-text"><img src="{% static \'img/image.gif\' %}"></img></div>';
$("body").append(text);
</script>

Django staticファイル まとめ - Qiita
この記事を参考にすると、{% load static %}というおまじないがなければ使えなさそうというのと、
別にエスケープする必要はなさそうという感じですね。
この書き方を参考に編集してみては？

{% load static %}
<img src="{% static "myapp/image.jpg" %}" alt="My image"/>

Comments

[donadona]

ありがとうございました。

先程回答者様への私の返信ですが、スクリプトはページロード時に一度読み込んでいるので、その中でテンプレート制御文は使えましたね。
再訂正。

それで、ご提供いただいたコードでうまくいきました。
HTMLに記述するダブルクォーテーションの方は、二重になっても良いようです。

助かりました。

[miyabi-sun]

あー、いまさらですが理由がわかりました。
Webサーバの実行順序は下記です。

(Pythonで作った)WebサーバがHTML文書作る
→ChromeがHTTPリクエストを行いHTML文書をローカルに持ち帰る
→scriptタグを見つけて実行

一見コードの外側からシングルクォート、ダブルクォートを併用していてエスケープするしかないように思えますが、
実際にはDjangoテンプレートの記述が真っ先に解釈されてきれいなHTML文書が生成されます。
なので質問文の位置でエスケープしたら動きませんよという話ですね。