Front end and Back end: DHTML (Dynamic HTML)

Dynamically or instantly updating/appending/removing html content is said to be as dynamic html.
A normal html page which we prepare or do is said to be html but it is not dynamic and always static.
In case of dynamic html, file up loader in web application should be capable enough of uploading any number of files by the user instead of specific limit. In such case we will provide a basic limit of either 2 or 3 file up loaders as default in the interface and also providing a button to “add more files”.
When user clicks on the button we need to dynamically add some more file up loaders.
There could be many cases not only specific to file up loaders but also to dynamically show multiple text boxes, check boxes, radio buttons, etc….
Please copy the below code and enjoy dynamic html

Below java script code is to allow user to design his own html component like button, anchor, text box, marquee, file upload on his own.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DHTML Demo</title>
</head>
<body>
<table id="tblUploader">
<tr><td>Type</td>
<td>
<select id="slt_Cmp" onchange="Content();">
<option selected="selected" value="1">Create Text box</option>
<option selected="selected" value="2">Crate Button</option>
<option selected="selected" value="3">Create Marquee</option>
<option selected="selected" value="4">Create File upload</option>
<option selected="selected" value="5">Create Anchor</option>
</select></td>
</tr>
<tr><td>Text</td><td>
<select id="slt_Text" onchange="Content();">
<option selected="selected" value="1">Hi</option>
<option selected="selected" value="2">Hello</option>
</select>
</td></tr>
<tr><td>Click</td><td>
<select id="slt_Clk" onchange="Content();">
<option selected="selected">Good Morning</option>
<option selected="selected">Good Evening</option>
</select>
</td></tr>
<tr><td>Component</td><td><span id="spn_Content"></span></td></tr>
</table>
<script type="text/javascript" language="javascript">
function Content()
{
var cmp=document.getElementById('slt_Cmp').value;
var txt=document.getElementById('slt_Text').options[document.getElementById('slt_Text').selectedIndex].text;
var clk=document.getElementById('slt_Clk').options[document.getElementById('slt_Clk').selectedIndex].text;
document.getElementById('slt_Clk').disabled=false;
document.getElementById('slt_Text').disabled=false;
var cmpnent='';
switch(cmp)
{
case "1" : cmpnent="<input type='text' id='txt' value='"+txt+"'/>";
document.getElementById('slt_Clk').disabled=true;
break;
case "2" : cmpnent="<input type='button' id='btn' value='"+txt+"' onclick=\"alert('"+clk+"');return false;\"/>";
break;
case "3" : cmpnent="<marquee> "+txt+"</marquee>";
document.getElementById('slt_Clk').disabled=true;
break;
case "4" : cmpnent="<input type='file' id='flp'/>";
document.getElementById('slt_Clk').disabled=true;
document.getElementById('slt_Text').disabled=true;
break;
case "5" : cmpnent="<a id='a' onclick=\"alert('"+clk+"');return false;\" href='#'>"+txt+"</a>" ;
break;
}
document.getElementById('spn_Content').innerHTML=cmpnent;
}
Content();
</script>
</body>
</html>

Output:-