Looking for a good way to separate Javascript and HTML

I have just started to work with jquery so I need to make sure I do it alright. I'll explain what I believe right now, please give me your thoughts.

First I think that the html output from the server should be mainly for those that don't have js or if there's a browser bug. That way the page will work for everyone I hope.

Then I think that jquery should have hidden data and templates that it uses to modify the page.

I don't know what format the templates should be in. One idea is to just make it like this

<div id="checkbox-template" class="templatedefinition" style="visibility:hidden">
<input type="checkbox"><label></label>
</div>

This would be perfect I think but I have my doubts. Another idea would be to use

$(document.createElement())

And then there are several options to treat the data. I've tried something simple like this:

var fruits= new Array(
    // id - Label - info
    new Array("orange","Orange","some info"),
    new Array("apple","Apple","some info"),
    new Array("banana","Banana","some info")
    );

And now I'm ready to construct checkboxes for the fruits and modify the original page. But before I start to do something like this in all my solutions it would be great to know if something like this is alright.

Solution

First let me say that there's no hard and fast rule to your question and imo it voices down to personal preference for specific situations. Here are some considerations to help you along:

First I think that the html output from the server should be mainly for those that don't have js or if there's a browser bug. That way the page will work for everyone I hope.

You are talking about "Progressive enhancement" which is a strategy to increase "accessibility" to your website. To do so, you would plan and develop a user experience that works for folks who don't have Javascript enabled before you add-on Javascript to enhance that experience for those who do have it enabled. You should plan in your design what kind of functionality is "lost" when Javascript is not available - Simplistically put - good "accessibility" is when the main task like say "submitting a form" still works without Javascript.

You're also asking if you should output hidden html elements that are meant only for the 'enchanced Javascript experience' in the HTML or should you 'generate' it on the fly using Javascript. This brings us to another term - "Unobtrusive JavaScript".

One school of thought is to never put any thing that is meant for the javascript-only experience in your html page and use Javascript itself to add those stuff to the DOM. The advanage to that is that you will have a cleaner, more lightweight and portable html page.

Another school of thought is to be less "purist" and more "practical" - meaning do what is most efficient. Don't write an extra 100 lines of Javascript code and spent an extra 2 hours if you can simply add the extra code directly to the HTML page and hide it with css.

I personally believe that as programmers we should always consider the business value when making these decisions. Ask yourself things like "How much time should i spent to do this?", "am I creating a website for 5 hundred or 5 million users?". Basically, don't use an grenade to kill a mice ;)