How To 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 &quot;" + divIdName + "&quot;</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>

3 comments:

  1. how to create server control create like this?

    ReplyDelete
  2. Hi Anonymous
    check this article

    http://aspdotnetcodebook.blogspot.com/2008/03/how-to-create-textbox-control.html

    ReplyDelete