将flask变量从javascript传递到html

Question

I try to programmatically generate a html div in JavaScript and add it into my html page when a button is clicked. Everything works pretty well except that my variables coming from Flask are not displayed.

Example :

Javascript :

function add_div(){
    var html_to_add = "<div><p>{{my_string}}</p></div>";
    $(html_to_add).insertBefore("#submit-btn");
}

Python :

@app.route("/")
def main_page():
    return render_template("index.html",my_string="Variable à afficher")

When the button is clicked in html, it displays : {{my_string}} instead of "Variable à afficher".

Is there a way to displays the variable correctly ?

Answer 1

Hope this helps.

var my_str = '{{ my_string }}';
var html_to_add = "<div><p>" + my_str + "</p></div>";

Answer 2

Please try this:

var html_to_add = `<div><p>${my_string}</p></div>`;

Pay attention to the punctuation mark `, it is backquote.