javascript - how to dynamically load html into div in using jquery? -

i have 2 files mypage.html , pagelogic.js

html page contains multi-step form

in first step based on user selection interest(drop-down/radio buttons) step_2 div visible(step 2 form different each interest topics)

step_2 structure like

<div id="step_2">   <div id="interesttopic_1">       long html different form fields......   </div>   <div id="interesttopic_2">       long html different form fields......   </div>   <div id="interesttopic_3">       long html different form fields......   </div>   <div id="interesttopic_4">       long html different form fields......   </div>   <div id="interesttopic_5">       long html different form fields......   </div> </div> 

i want add "interesttopic" div step_2 div dynamically based on values selection step_1 , each interesttopic may contains different text fields/input controls.how can add div dynamically , want use input controls inside div in same js added div.. possible without server call? tried simple hide/show when loading page , filling first form long html cause page freeze 1-2 seconds

try this. reference here have added "interesttopic" div "step_2" div child dynamically through button click input box.

var i=6;  $("#add").click(function () {                  $("#step_2").children().last().after('<div id="interesttopic_'+i+'"><input type="text" value="test"/></div>');  i++;              });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="step_2">          <div id="interesttopic_1">              long html different form fields......          </div>          <div id="interesttopic_2">              long html different form fields......          </div>          <div id="interesttopic_3">              long html different form fields......          </div>          <div id="interesttopic_4">              long html different form fields......          </div>          <div id="interesttopic_5">              long html different form fields......          </div>      </div>      <button id="add">add new div</button>