How To Create control at runtime using JavaScript

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>

Please do not post any spam link in the comment box😊

Post a Comment (0)
Previous Post Next Post