如何在<script>里修改flask传入html的变量？

Question

web小白跪求指点~~~

通过flask视图函数中的render_template，我将一个变量传入了html，形式大概是：

return render_template('tb.html', datas=datas)

其中，data是一个list，每个元素是一个dict。
在html中，我根据datas的内容动态添加部件，即：

<div id="divadd">
    {%for item in datas%}
    {#根据item的key内容添加部件的代码#}
    {%endfor%}
    <button type="button" id="add">新增部件</button>
</div>

现在我想通过div中的新增部件，每点击一次可以在datas后追加一个元素，对应html上的部件也多一个。

我知道可以使用类似下面的方法实现：

<script type="text/javascript">
    $(function() {
        $('#add').click(function(){
            $('#divadd').append('<li>动态新增条目</li>');
        });
     });
</script>

但该方法我想要添加的部件部分相比<li>动态新增条目</li>要复杂得多，同时需要根据datas中对应元素的编号来动态生成，所以这样的方法并不适用。

目前的预期是，是否有某种方法，可以在<script>中修改datas，例如类似datas.append(#新元素)？如果不能直接修改datas，或能够修改datas但html不会重新渲染，那么我的想法应当如何实现？

Answer 1

若想js脚本更改后台flask数据，通常是ajax请求后台数据，然后后台响应渲染。但如果你只是想在前端页面点击一下，新增一行及相关内容。用原生js书写即是，vue，react都是不错的选择。