DHTML, CSS and AJAX are all making people write more and more complex html code, ofcourse providing very good user experience. Dynamically displaying a UI control based on some user action can be achieved in two ways
1. By having the ui control pregenerated but hidden
2. By dynamically creating the dom necessary for the ui control and inserting it into the page’s dom.
The former can be done on the server side. The later, while the necessary components are still generated on the server side, the actual dom element construction and putting it into the page’s dom is done using JavaScript on the client side.
For most cases, I would recommend taking approach 1. This is because, tools like DOM Inspector seem to show only the initial dom when the page is loaded. Any subsequent manipulations to the DOM doesn’t seem to show in the DOM Inspector tree. So, debugging such changes could be really painful. Recently I had encountered one such senario for an AJAX application where the UI creation is happening on the client side using javascript.
Ofcourse, there may be cases where this can only happen on the client side. For example, to provide an ability to create any number of rows by clicking a “add another row” button, pregeneration of all the row regions before hand on the serverside is not feasible. So, that’s when the DOM manipulation on the client side will come handy.
So, unless you have this complexity, stick with pre-generating the UI elements on the serverside. You have a way to view the created HTML which makes it easy to debug.