onclickを使用して作成されたdivの中にjavascriptでonclickを使用して新しいdivを作成しますか？

Question

私は、ラジオボタン入力からなるdivを、PHPのフォーム内のラジオボタン入力からonclickを使用して作成しました。このdivの内部からonclickを使用して別のdivを作成しようとしました。私が間違っている場所を知りたいですか。

 <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

あなたは関数を正しく呼び出していません。代わりに：

ip.onclick= "createDiv4_1()"; 

これは文字列であり、呼び出されません。あなたは引用符でHTMLに入れますが、JavaScriptでは必要ありません。 JSのかっこも取り除く。だから、これを使用する：

ip.onclick= createDiv4_1; 

の作業フィドル：https://jsfiddle.net/thatOneGuy/xgvqwcq4/2/

は私があまりにも動作するように、このためにID containとのdivを追加しました。

Answer 2

ご質問にはタイトルが2つあります。

がHTML内部onclikc及び第二の方法である

document.getElementById("secondDiv").addEventListener("click", function() { 
    newFunctionI(); 
}) 


/*JQ version*/ 
$("#secondDiv").on("click", function() { 
    newFunctionI(); 
}) 

通常のJSを使用し忘れる：）（使用jQueryの追記（）またはHTML。

function yourFunctionI() { 
    $("#ID").append("<div id='secondDiv' onclick='newFunction()'> new </div>") 
}