Dynamically adding HTML components using JavaScript

At times there will be requirements to dynamically add a scetion of HTML multiple times in UI. This can be achived by using JavaScript. One of the implementation for such a scenario is addressed in the following example.
In thie example, there was a need to add a row of three Text boxes, select box to be added dynamically to a page on a button click. Validation has to be done to the dynamically added rows.

Design & Usage:

The design of the sample goes like this.

There will be a container to hold the control items, like button to add the component, field to hold the counter. Following the control box an empty container to hold the dynamically added components. Another container just below this, to hold the contents that has to be created dynamically. The contents has to be formulated carefully with the layouts and identifications. To achive the easier identificaiton of the elements inside the components an auto generated ‘ID’ is added to all the elements on the go. To achive this a delimiter is added to all the elements. Here the delimiter used is “ADDIDHERE”. This will be replaced by the counter variable on the go.
View Sample page.
Download Sample.