Create Control at runtime using JavaScript

through code written below we can create control at runtime using javascript



< %@ Page Language="C#" AutoEventWireup="true" CodeFile="AddRemoveJavascript.aspx.cs" Inherits="AddRemoveJavascript" % >

< !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 runat="server" >
< title >< /title >
< script type="text/javascript" >
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value - 1) + 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my' + num + 'Div';
newdiv.setAttribute('id', divIdName);
newdiv.innerHTML = "Element Number " + num + " has been added! < a href=\"javascript:;\" onclick=\"removeElement(\'" + divIdName + "\')\" >Remove the element "" + divIdName + ""< /a >";

ni.appendChild(newdiv);
}
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

< /script >
< /head >
< body >
< form id="form1" runat="server" >
< div >
< input type="hidden" value="0" id="theValue" / >
< p >< a href="javascript:;" onclick="addElement();" >Add Some Elements< /a >< /p >
< div id="myDiv" > < /div >

< /div >
< /form >
< /body >
< /html >