How to Add Elements to the web page at run time?

How to Add Elements to the web page at run time?

 <html>

    <head>
        <title>Testing</title>
        <script>
            function addElement()
            {
                x=document.getElementById("mybody");
                node=document.createElement("h1");
                node.innerHTML="this is new heading one";
                x.appendChild(node);
               


            }
            var ctr=0;
            function addButton()
            {
                ctr++;
                x=document.getElementById("mybody");
                node=document.createElement("button");
                node.innerHTML="New Button " + ctr;
               
                node.value="New Button " +ctr;
                x.appendChild(node);
            }
        </script>
    </head>
    <body id="mybody">
        <h1>Welcome to server page</h1>
        <input type="button" onclick="addButton()" value="Add Element" >
        <input type="button" onclick="addElement()" value="Add Element" >
    </body>
</html>

Comments