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 scriptvar data = JSON.parse(Object);$(#list).append(    <div class='row' id=' + data[j].hash + '>\       <span class='time'> + data[j].time + </span>\       <span class='date'> + data[j].date + , </span>\       <input type='checkbox' name='wkshp' value=' + data[j].hash + '/>\       <span class='title'> + data[j].title + </span>\       <span class='desc'> + data[j].desc + </span>\       <div class='meta'>         <span class='loc'> + data[j].location + </span>\         <span class='who'> + data[j].who + </span>\         <span class='cat'> + data[j].cat + </span>\         <span class='type'> + data[j].type + </span>\          <span class='seats'>Seats:  + data[j].seats + </span>\       </div>\       <div class='reg-code lock hide'>\         <h2>Registration Code</h2>\         <input type='text' name='code' value='' />       </div>  </div>);What improvements can I make to the Object? Is there a better way to parse the object by the client?
Alternatives for appending a div from a JS object
javascript;html