在javascript中使用onclick在使用onclick本身创建的div中创建一个新的div？

Question

I created a div consisting of radio button inputs using onclick from a radio button input inside a form in php and then i again attempted to create another div using onclick from inside this created div but only the outer div is being created. Would like to know where i am wrong..

        <input id="sub"  type="radio" name="opt1" value="2" onclick="createDiv4()"> Academic User<br/>

           function createDiv4() {
            if(document.getElementById("acad_")==null)
            {
               var divi = document.createElement("div");
               divi.id="acad_";
                divi.style.height="100px";
                //divi.style.marginTop="200px";
               var cont = document.getElementById('contain');
                 cont.appendChild(divi);                   
                var p = document.createElement("label");
               var disp = document.createTextNode("Please select the type of User :");

               p.appendChild(disp);
               p.style.textSize="16px";
               p.style.textAlign="left";
               divi.appendChild(p);
               var b1 = document.createElement("BR");
               divi.appendChild(b1);

               var ip = document.createElement("input");
               ip.name="wo";
               ip.value="1";
               ip.type="radio";
               ip.onclick="createDiv4_1()";
               ip.style.marginRight="4px";

               divi.appendChild(ip);
               var labe = document.createElement("label");

               var labe_val = document.createTextNode("Technical Institute");
               labe.appendChild(labe_val);
               divi.appendChild(labe);

               var b = document.createElement("BR");
               divi.appendChild(b);

               var ip2 = document.createElement("input");
               ip2.name="wo";
               ip2.value="2";
               ip2.type="radio";
               ip2.style.marginRight="4px";
               ip2.onclick="createDiv4_1()";
               divi.appendChild(ip2);

                var labe2 = document.createElement("label");

               var labe_val2 = document.createTextNode("School");
               labe2.appendChild(labe_val2);
               divi.appendChild(labe2);


                if(document.getElementById("govt")!=null)
               {
                   var de = document.getElementById("govt");
                   de.parentNode.removeChild(de);
               }

            }   
            else
            {
                var divi1 = document.getElementById("acad_");
                divi1.parentNode.removeChild(divi1);
            }
        }

    </script>
    <script>    
        function createDiv4_1() {
            if(document.getElementById("school")==null)
            {

               var divi = document.createElement("div");
               divi.id="school";

                //divi.style.marginTop="200px";
               var cont = document.getElementById('contain');
                 cont.appendChild(divi);                   
                var p = document.createElement("label");
               var disp = document.createTextNode("Please select the type of User for  Workshop :");

               p.appendChild(disp);
               p.style.textSize="16px";
               p.style.textAlign="left";
               divi.appendChild(p);
               var b1 = document.createElement("BR");
               divi.appendChild(b1);

               var ip = document.createElement("input");
                ip.name="wo";
               ip.value="1";
               ip.type="radio";
               ip.style.marginRight="4px";

               divi.appendChild(ip);
               var labe = document.createElement("label");

               var labe_val = document.createTextNode("School Student");
               labe.appendChild(labe_val);
               divi.appendChild(labe);

               var b = document.createElement("BR");
               divi.appendChild(b);

               var ip2 = document.createElement("input");
               ip2.name="wo";
               ip2.value="2";
               ip2.type="radio";
               ip2.style.marginRight="4px";

               divi.appendChild(ip2);

                var labe2 = document.createElement("label");

               var labe_val2 = document.createTextNode("Teacher");
               labe2.appendChild(labe_val2);
               divi.appendChild(labe2);

               var b2 = document.createElement("BR");
                divi.appendChild(b2);

                var ip2 = document.createElement("input");
               ip2.name="wo";
               ip2.value="2";
               ip2.type="radio";
               ip2.style.marginRight="4px";

               divi.appendChild(ip2);

                var labe3 = document.createElement("label");

               var labe_val3 = document.createTextNode("Parent");
               labe3.appendChild(labe_val3);
               divi.appendChild(labe3);

                if(document.getElementById("govt")!=null)
               {
                   var de = document.getElementById("govt");
                   de.parentNode.removeChild(de);
               }

            }   
            else
            {
                var divi1 = document.getElementById("school");
                divi1.parentNode.removeChild(divi1);
            }
        }
        </script>

Answer 1

You arent calling the functions properly. Instead of :

ip.onclick= "createDiv4_1()";

This is only a string, it won't call it. You put it in quotes in the HTML but in JavaScript you don't need to. Also get rid of the parenthesis in JS. So use this :

ip.onclick= createDiv4_1;

Working fiddle : https://jsfiddle.net/thatOneGuy/xgvqwcq4/2/

I added a div with ID contain for this to work too.