Alternatives for appending a div from a JS object I've built my first "real" web app which uses both server-side and client side functions to populate a list of courses a user can register for. Currently, the client receives an Object with the following structure:

Object

{
  "date": "1/1/2018",
  "time": "14:30",
  "title": "String Title 1",
  "desc": "A long string description with information about the workshop.",
  "cat": "Category 1, Category 2",
  "seats": "20",
  "type": "In Person",
  "location" : "Building A",
  "lock": true,
  "code": "ABCD",
  "hash": "Str1ng",
  "who": "Teachers, Admin"
} ...


Then, the client adds div elements built from the Object. I'm using .append() and inserting object keys at the correct point. It works fine, but I'm feeling like this is a really inefficient and frankly, messy, way to add the content. 

Client script

var data = JSON.parse(Object);

$("#list").append(
    "&lt;div class='row' id='" + data[j].hash + "'&gt;\
       &lt;span class='time'&gt;" + data[j].time + "&lt;/span&gt;\
       &lt;span class='date'&gt;" + data[j].date + ", &lt;/span&gt;\
       &lt;input type='checkbox' name='wkshp' value='" + data[j].hash + "'/&gt;\
       &lt;span class='title'&gt;" + data[j].title + "&lt;/span&gt;\
       &lt;span class='desc'&gt;" + data[j].desc + "&lt;/span&gt;\
       &lt;div class='meta'&gt;
         &lt;span class='loc'&gt;" + data[j].location + "&lt;/span&gt;\
         &lt;span class='who'&gt;" + data[j].who + "&lt;/span&gt;\
         &lt;span class='cat'&gt;" + data[j].cat + "&lt;/span&gt;\
         &lt;span class='type'&gt;" + data[j].type + "&lt;/span&gt;\ 
         &lt;span class='seats'&gt;Seats: " + data[j].seats + "&lt;/span&gt;\
       &lt;/div&gt;\
       &lt;div class='reg-code lock hide'&gt;\
         &lt;h2&gt;Registration Code&lt;/h2&gt;\
         &lt;input type='text' name='code' value='' /&gt;
       &lt;/div&gt;
  &lt;/div&gt;"
);


What improvements can I make to the Object? Is there a better way to parse the object by the client?
You could use template literals to avoid the breaking the strings with + and doing \ to newline. Alternatively, you could use template libraries which are more flexible. Mustache is a good example. 
Consider using a web framework that does the bulk of the rendering for you. That way, you only have to worry about your data. Web frameworks also do optimizations to avoid re-rendering the entire chunk of HTML, do housekeeping, etc.


Other than that, there's not much to review.