Instead of generating HTML inside of JavaScript by concatenating strings to form your display code you can use JSRender to apply templates to your JSON objects in order to greatly simplify your code.
As an example I am going to create a simple form that takes in some person information and uses JQuery and JSRender to display it back on the page.

Step 1: Get JSRender

You can find JSRender here from github.

Step 2: Reference the jsrender.js file in your page

    <script src="Script/jsrender.js" type="text/javascript"></script>

Step 3: Create your template

 <script id="PersonTemplate" type="text/x-jsrender">
    <div class="DataRow">
       <div class="Col">{{>FirstName}}</div>
       <div class="Col">{{>LastName}}</div>
       <div class="Col">{{>Suffix}}</div>
       <div class="Col">{{>Gender}}</div>  
    </div>
 </script>

Make sure you give your template an id, set its type to text/x-jsrender, and then declare the template inside of your document.ready function as shown below:

$.templates({
  PersonTemplate: "#PersonTemplate"
});

Step 4 : Fill your JSON Object.

In the example below I am storing all of my entries in the people object.  I am pulling the values from the html form, filling out my row, and adding it to the people object.


var people= [];

$("#btnSave").button().click(function () {
   var person = {
      "FirstName": $("#txtFirstName").val(),
      "LastName": $("#txtLastName").val(),
      "Suffix": $("#txtSuffix").val(),
      "Gender": $("#ddlGender").val()
   };

people.push(person);

Step 5: Apply the template

Applying the template is very simple; you just have to pass the data that you wish to render to the template function, which then gets output as HTML. In the below example I am appending the output to the SavedPeople div.

$("#SavedPeople").text("");
$("#SavedPeople").append($.render.PersonTemplate(people));

The results should look something similar to this:

Fully working example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>JSON Templating Example</title>
   <style>
      .DataRow{
         position: relative;
         width: inherit;
         min-width: 650px;
         clear: both;
         margin: 10px;
         height: 1%;         
         overflow: hidden;
      }

      .FormRow{
         position: relative;
         width: inherit;
         min-width: 650px;
         clear: both;
         height: 15px;
         margin: 10px;
      }

      .Col{
         float: left;
         width: 25%;
         height: 100%;
      }

      .headerRow{
         font-size: 11px;         
         font-weight: bold;
         color: Black;
         background-color: #C0E0FF;         
         vertical-align: top;
         border: solid 1px #aaaaaa;
         padding: 5px;
      }

</style>

</head>

<body>

   <form id="form1" runat="server">
      <div>
         <fieldset> <legend>Person</legend>
             <div class="FormRow">
                <div class="Col">First Name</div>
                <div class="Col"> <input id="txtFirstName" type="text" /></div>
             </div>

             <div class="FormRow">
                <div class="Col">Last Name </div>
                <div class="Col"> <input id="txtLastName" type="text" /></div>
             </div>

             <div class="FormRow">
                <div class="Col">Suffix</div>
                <div class="Col"> <input id="txtSuffix" type="text" /></div>
             </div>

             <div class="FormRow">
                <div class="Col">Gender</div>
                <div class="Col">
                   <select id="ddlGender">
                      <option value="male">Male</option>
                      <option value="female">Female</option>

                   </select>
                </div>
             </div>

             <a href="#" id="btnSave">Save</a>

         </fieldset>

         <h2>Saved People</h2>
            <div class="DataRow headerRow">
                <div class="Col">First Name</div>
                <div class="Col">Last Name</div>
                <div class="Col">Suffix</div>
                <div class="Col">Gender</div>
            </div>
            
            <div id="SavedPeople">
                (No People)
            </div>
         </div>

  </form>

  <script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
  <script src="Script/jquery-ui-1.8.18.js" type="text/javascript"></script>
  <script src="Script/jsrender.js" type="text/javascript"></script>
  
  <script>
     $(document).ready(function () {
        $.templates({
           PersonTemplate: "#PersonTemplate"
        });

        var people = [];

        $("#btnSave").button().click(function () {
           var person = {
             "FirstName": $("#txtFirstName").val(),
             "LastName": $("#txtLastName").val(),
             "Suffix": $("#txtSuffix").val(),
             "Gender": $("#ddlGender").val()
           };

           people.push(person);

           $("#SavedPeople").text("");
           $("#SavedPeople").append($.render.PersonTemplate(people));

        });
     });

  </script>

  <script id="PersonTemplate" type="text/x-jsrender">
     <div class="DataRow">
        <div class="Col">{{>FirstName}}</div>
        <div class="Col">{{>LastName}}</div>
        <div class="Col">
           {{if Suffix == ""}}
               
           {{else}}
              {{>Suffix}}
           {{/if}}
        </div>
        <div class="Col">{{>Gender}}</div>  
     </div>

  </script>


</body>
</html>

This post is cross posted at TCSC.com