I'm calling a web service that returns an array of objects in JSON. I want to take those objects and populate a div with HTML. Let's say each object contains a url and a name.
If I wanted to generate the following HTML for each object:
<div><img src="the url" />the name</div>
Is there a best practice for this? I can see a few ways of doing it:
This, I believe, makes it far easier to maintain the code and quickly make changes to it because the markup is easier to read and trace. My rule of thumb is: HTML is for document structure, CSS is for presentation, JavaScript is for behavior.
Optimize JavaScript Placement Another good practice in using JavaScript with HTML is to place your JavaScript at the end of your HTML file if it is possible, between <script> tags, before the closing </body> tag, as you may notice from the above example.
It is best practice to use HTML semantic elements for the proper assembly of your web page. Avoid using <divs> in place of HTML semantics. Do not use <div> elements to show headers and footers on your web page. Use semantic <header> and <footer> elements instead.
Options #1 and #2 are going to be your most immediate straight forward options, however, for both options, you're going to feel the performance and maintenance impact by either building strings or creating DOM objects.
Templating isn't all that immature, and you're seeing it popup in most of the major Javascript frameworks.
Here's an example in JQuery Template Plugin that will save you the performance hit, and is really, really straightforward:
var t = $.template('<div><img src="${url}" />${name}</div>'); $(selector).append( t , { url: jsonObj.url, name: jsonObj.name });
I say go the cool route (and better performing, more maintainable), and use templating.
If you absolutely have to concatenate strings, instead of the normal :
var s=""; for (var i=0; i < 200; ++i) {s += "testing"; }
use a temporary array:
var s=[]; for (var i=0; i < 200; ++i) { s.push("testing"); } s = s.join("");
Using arrays is much faster, especially in IE. I did some testing with strings a while ago with IE7, Opera and FF. Opera took only 0.4s to perform the test, but IE7 hadn't finished after 20 MINUTES !!!! ( No, I am not kidding. ) With array IE was very fast.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With