Dynamically create Html using JavaScript

Don’t wrap HTML in JavaScript code, Keep them seperate else they’ll fight and you’ll get beaten

Today, the trend is “Mashups”, we take data from this web service and that web service and make something beautiful. We normally do this in javaScript, making xmlHTTPRequest. On obtaining a response. we then dynamically use JavaScript to create HTML. However, I’ve notice that many developers tend to mix JavaScript and HTML. By doing so, I think they complicate the codes. Representing HTML codes as JavaScript Strings make them prone to JavaScript errors. Also, they might end in making their HTML not as per W3C recommendation due to single and double quotes.

Suppose I’m getting the details of laptops from an xmlHTTPRequest. Then, in JavaScript, I’m having to generate a layout to display the laptop’s details.

I get the laptop brand name, screen size, processor capacity, RAM , Hard Disk details then a picture URL for the laptop and i need to write JavaScript to build an HTML layout and display the content in it.

Codes to dynamically use JavaScript to create HTML

1. The bad practice, Mixing the codes(this is what i think)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$.get("URL_to_get_details",function(laptops)
{
      /*here i need to write the code to display the laptop
      suppose the laptop is json encoded */
      laptops=$.parseJSON(laptops); 
      /*parse the json encoded data with jQuery*/
      var i=0,html="";
      while (i<laptops.length){
           currentLaptop=laptops[i];
           /*build the HTML for the laptops*/
           html+="<div><span>Brand Name:"+currentLaptop.brandName+"</span><span>"+.....+
                 "<img src= "\"+currentlaptop.URL+"\" alt=\"create HTML using JavaScript\">";
      }
      /* create the newly built layout */
      ("#laptopContainer").html(html);
});

What I’m doing in the above code is to wrap HTML in JavaScript. I’m representing HTML as a JavaScript String. I’m having to be cautious due to JavaScript String quotes and HTML quotes. I really don’t think its good. When you start to have lots of HTML, you’ll become crazy mingling with HTML syntax and keeping JavaScript free from errors at the same time.

So this is what i propose. Completly isolate HTML and JavaScript codes. Instead of wrapping HTML into JavaScript, declare a prototype of the layout in HTML and hide it in your DOM.

2. The good practice, Seperating the codes

Normally, I do it like this because i think it’s better. If you have a better solution please share it

To Use JavaScript to create HTML:

• Declare an HTML Layout prototype in the DOM with dummy variables
• Use raw JavaScript or jQuery to retrieve the HTML codes from DOM as string
• Obtain variable from their sources
• use JavaScript to replace dummy variable with apporiate values(e.g use .replace)

1
2
3
4
5
6
7
8
9
10

<div id="prototype" style="display:none">
    <div>
       <span>Brand Name: varBrandName</span>
       <span>Screen Size: varScreenSize</span>
       <span>Processor Capacity: varProcessorCapacity</span>
       <span>RAM:varRAM</span>
       <span>Hard Disk Details: varHardDisk</span>
       <span><img src="varPictureSrc" alt="img" /></span> 
   <div>
</div>

now, in the HTML code above, you’ll see var. These will be actually be replaced by the actual values in JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$.get("URL_to_get_details",function(laptops)
{
      /*here i need to write the code to display the laptop
      suppose the laptop is json encoded */
      laptops=$.parseJSON(laptops); /*parse the json encoded data with jQuery*/
      var i=0,html="";
      while (i<laptops.length){
           currentLaptop=laptops[i];
         
           /* get the content of the prototype */
           currentHTML=("#prototype").html();
   
           /* replace the dummy values in the HTML */
           currentHTML=currentHTML.replace("varBrandName",laptops[i].brandName);
           currentHTML=currentHTML.replace("varScreenSize",laptops[i].screenSize)
           currentHTML=currentHTML.replace("varProcessorCapacity",laptops[i].processor);
           currentHTML=currentHTML.replace("varRAM",laptops[i].RAM);
           currentHTML=currentHTML.replace("varHardDisk",laptops[i].hardDisk);
           currentHTML=currentHTML.replace("varPictureSrc",laptops[i].pictureSrc);
     
           /* build the HTML for the laptops */
           html+=currentHTML;
      }
      /* create the newly built layout */
      ("#laptopContainer").html(html);
});

SO, as you see, I’ve retrive the HTML from the declared prototype and then generated the layout replacing the dummy variables with the value I’ve obtained from xmlHTTPResponse. At any time, I did not wrap the HTML in JavaScript. The prototype I declared is pure HTML as per W3C recommendation.