Как добавить CSS/HTML к вызову Ajax

Question

Я звоню на свой сервер каждый раз, когда пользователь вводит/удаляет ключ в окне поиска, извлекает большой список списков в JSON, через который я прохожу через JS. Чтобы получить данные на моем шаблоне, я добавляю HTML & CSS с помощью JQuery. Вот пример, чтобы показать, что я имею в виду ...

<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); 

Но это путь ИМО.