Getting data from the server via JSON callback and parsing the data to HTML 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?

JavaScript

Here 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 = '&lt;table class="table text-left" width="100%" border="0" cellspacing="0" cellpadding="5"&gt;&lt;tbody&gt;&lt;tr style="border-top:none;"&gt;&lt;th scope="col" style="width: 20%;"&gt;Field 1&lt;/th&gt;&lt;th scope="col" style="width: 45%;"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Field 2&lt;/th&gt;&lt;th scope="col"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt; Date &lt;/th&gt;&lt;th scope="col"&gt;&lt;span class=" pull-right"&gt;Notes&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;';

    $.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 = '&lt;tr&gt;&lt;td&gt;&lt;i class="icon-stop"&gt;&lt;/i&gt;Day&lt;/td&gt;&lt;td&gt;&lt;select id="type_' + uniqueID + '"&gt;' + names + '&lt;/select&gt;&lt;/td&gt;';
    html_output += '&lt;td&gt;' + startDate + ' - ' + endDate + '&lt;/td&gt;';
    html_output += '&lt;td&gt;&lt;span class="pull-right"&gt;&lt;button type="button" class="accordion-toggle btn btn-default btn-small" data-toggle="collapse" data-parent="#accordion' + uniqueID + '" href="#collapseOne' + uniqueID + '"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;';
    html_output += '&lt;tr&gt;&lt;td class="bor-no" colspan="4"&gt;&lt;div id="accordion"&gt;&lt;div id="collapseOne' + uniqueID + '" class="collapse"&gt;&lt;div class="control-group control-group-notes"&gt;&lt;button onclick="clearMsgBox(\'' + uniqueID + '\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion' + uniqueID + '" href="#collapseOne' + uniqueID + '"&gt;x&lt;/button&gt;&lt;textarea id="msg_box_' + uniqueID + '" style="width: 92%;" rows="2" placeholder="Message..."&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;';
    return html_output;
}

function clearMsgBox(ebID){
    $('#msg_box_'+ebID).val('');
}


Could someone enlighten me on how to improve code like this?
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:

&lt;table class="table text-left" width="100"&gt;
    {{#each eventsData}}
       &lt;tr....
    {{/each}}
&lt;/table&gt;


Handlebars will then take the template and data and give you your HTML, which you can then insert into another element.