Javascript 动态HTML页面内容

假设我希望在用户每次更改搜索选项时显示不同的项目。 我通过AJAX获得新项目（这是强制性的，所以我不能使用POST，所以我不能使用django模板的{%for%}循环）。 目前，我获取返回的项目列表，并将其传递给生成HTML代码的javascript函数。此函数只不过是将字符串连接在一起并形成新的HTML内容

一个简单的例子：

function build_items_list(items_list, container){
    container.innerHTML = '';
    for(var i=0; i<items_list.length; i+=1){
        var item = items_list[i];
        container.innerHTML += '<div>' +
                               '<input type="checkbox" id="' + item.id.toString() + '">' + 
                               '<a href="' + item.url+'"><b>' + item.name + '</b></a>'+
                               '</div>'

    }
}

函数构建项目列表（项目列表，容器）{
container.innerHTML=''；
对于（var i=0；i我很抱歉，没有简单的解决方案，这就是为什么Angular、Ember等库如此成功的原因，您可以将js变量绑定到模板中

你可以为每个模板编写许多函数，但是考虑使用第三方库。
您在angular中的代码示例：

<div ng-repeat="item in items_list">
    <div>
        <input type="checkbox" id="{{item.id}}">
        <a href="{{item.url}}"><b>{{item.name}}</b></a>
    </div>
</div>

首先，没有正确的方法。

你这样做很好。

话虽如此，我已经用JavaScript创建了很多次内容，所以我想出了一个生成内容的函数。它可以很容易地修改，而且我发现它使代码、imo更干净

function createElement(element, attributes, text) {
    // function to create an element with class and text if wanted.
    // attributes is an object of key value items. Key is the attribute, value is the value.
    // you could change the "class" to an argument and use it to set anyAttribute
    var el = document.createElement(element);
    $.each(attributes, function(key, value) {
        el.setAttribute(key, value);
    });
    if (text) {
        var t = document.createTextNode(text);
        el.appendChild(t);
    }
    return el;
}

例如，可以这样称上述内容：

createElement("div", { 
    "class": "btn btn-default btn-sm btn-gene col-md-4", 
    "value": value }, "remove item")

这将为以下元素创建一个

<div class"btn btn-default btn-sm btn-gene col-md-4" value="value">remove item</div>

删除项目

您仍然需要在JavaScript中构建元素并将它们附加到DOM中，这需要做一些工作，但我发现这对DRY很有帮助

另一方面，正如@或Duan所说，您可以使用前端框架，也可以使用前端模板引擎。

框架中通常包含模板引擎和数据绑定值，以便它们在值更改时更改，但您可以自己执行逻辑，只需在框架外部使用模板引擎即可。

根据您的需要，有各种各样的模板引擎-
为什么使用python和django？这是一个项目。django、python和AJAX不是可选的。这是一个科学项目，许多库都在python的后端使用。但是这个特定的问题，我认为django和pythonSo没有任何角色与J相当SP？非常感谢。你的回答真的很有帮助：D