I am going to concentrate on creation of dynamic HTML based on javascript in this post. Here I took a simple input tag and submit button in a form and the objective here is like, let's say when a user enters a number in input text box and clicks submit button, I am going to replace the whole page with a select tag that contains the number of drop down elements as the number entered in the input text box.
Try it for yourself, enter a number in the text field and click the submit button with name "Click".
Here is the code that I used:
<html>
<head>
<script>
function function1() {
var a = parseInt(document.getElementById("id1").value);
var b = "<select>";
for(var c = 0;c<a;c++) {
b=b+"<option value=element"+c+">Element "+(parseInt(c)+1)+"</option>";
}
b=b+"</select>";
document.getElementById("id2").innerHTML=b;
return false;
}
</script>
</head>
<body>
<form>
<label id="id2"><input id="id1" type="text" />
<input onclick="return function1();" type="submit" value="Click" />
<label>
</label></label></form>
</body>
</html>
