I'm pretty new to web development with JS and was wondering if anyone can tell me how I can improve my code. I just feel like when it comes to maintainability my code would be very difficult to update. Can someone advice on some best practices or maybe how they do it?JavaScriptHere is a typical onready jQuery function. It calls a JSON and goes through the object with .each and parses the data to HTML and appends it the HTML DOM.$(document).ready(function () {    var fullday_start = '<table class=table text-left width=100% border=0 cellspacing=0 cellpadding=5><tbody><tr style=border-top:none;><th scope=col style=width: 20%;>Field 1</th><th scope=col style=width: 45%;><i class=icon-ok></i> Field 2</th><th scope=col><i class=icon-calendar></i> Date </th><th scope=col><span class= pull-right>Notes</span></th></tr>';    $.each(eventsData, function () {        day_render_html_output = fullday_start;        day_render_html_output += renderFullRow(start, end, names, this.uniqueID);    });    $('#output').html(day_render_html_output);});Here is an example/attempt of me trying to have some sense of maintainability by creating some JS functions that render outputs in HTML with given data from the JSON that's get called from onready above.function renderFullRow(startDate, endDate, names, uniqueID) {    var html_output = '<tr><td><i class=icon-stop></i>Day</td><td><select id=type_' + uniqueID + '>' + names + '</select></td>';    html_output += '<td>' + startDate + ' - ' + endDate + '</td>';    html_output += '<td><span class=pull-right><button type=button class=accordion-toggle btn btn-default btn-small data-toggle=collapse data-parent=#accordion' + uniqueID + ' href=#collapseOne' + uniqueID + '><i class=icon-pencil></i></button></span></td></tr>';    html_output += '<tr><td class=bor-no colspan=4><div id=accordion><div id=collapseOne' + uniqueID + ' class=collapse><div class=control-group control-group-notes><button onclick=clearMsgBox(\'' + uniqueID + '\') type=button class=close data-toggle=collapse data-parent=#accordion' + uniqueID + ' href=#collapseOne' + uniqueID + '>x</button><textarea id=msg_box_' + uniqueID + ' style=width: 92%; rows=2 placeholder=Message...></textarea></div></div></div></td></tr>';    return html_output;}function clearMsgBox(ebID){    $('#msg_box_'+ebID).val('');}Could someone enlighten me on how to improve code like this?
Getting data from the server via JSON callback and parsing the data to HTML
javascript;jquery;beginner;parsing
The code isn't bad. I think your taking the wrong approach though. Rendering HTML from JavaScript is ugly and as you mentioned, hard to maintain. I'd recommend looking into a client side templating solution such as Handlebars, Mustache, Dust, etc..This will allow you to write templates rather than appending html to a variable. For example, in handlebars you could do something like:<table class=table text-left width=100>    {{#each eventsData}}       <tr....    {{/each}}</table>Handlebars will then take the template and data and give you your HTML, which you can then insert into another element.