javascript - 如何将 CSS/HTML 添加到 Ajax 调用

Question

每当用户在搜索框中输入/删除一个键时，我都会调用我的服务器，检索 JSON 中的大量列表，我在 JS 中循环遍历这些列表。为了将数据添加到我的模板中，我使用 Jquery 添加了 HTML 和 CSS。这是一个例子来说明我的意思......

<script type="text/javascript">
   $(document).ready(function() {
       $('#input-search').keyup(function(data) { 
        var search = $("#input-search").val();
        $.get("/search/", { search:search }, function(search){
            var matches = (search.search);  
            for (match in matches){
                console.log(matches[match].full_name);
                $(".searchable-container").append("<div>").addClass("items col-xs-12 col-sm-12 col-md-6 col-lg-6").append("<div>").addClass("info-block block-info clearfix").append("<div>").addClass("square-box pull-left").append("<span>").addClass("glyphicon glyphicon-user glyphicon-lg").append("<h5>")
            }});
        });
   });
</script> 

我觉得这不是设置返回数据样式的最佳方式，因为它需要大量试验和错误，而且看起来很难看。例如，使用 Jinja 模板，我可以简单地添加 {{ curly braces }}，它会在需要的地方调用我的数据。考虑到我是 JQuery 的新手，我只是想知道是否缺少某些东西，或者做我正在做的事情的更好方法。

Answer 1

我建议您不要直接附加对象。只需创建它然后附加它。像这样的东西:

var obj1 = $("<div>");
var obj2 = $("<div>");

obj1.addClass(...);
...
$(".searchable-container").append(obj1);
$(".searchable-container").append(obj2);

但这是 IMO 的方式。