Как динамически загружать html в div с помощью jquery?

Question

У меня есть два файла mypage.html, PageLogic.js

HTML страница содержит многоступенчатой ​​форму

В первом этапе на основе выбора пользователя, для его интереса (кнопки раскрывающегося/радио) step_2 Div является видимая (шаг 2 форма различна для каждого интереса темы)

Step_2 структуры подобно

<div id="step_2"> 
    <div id="interestTopic_1"> 
     Long html with different form fields...... 
    </div> 
    <div id="interestTopic_2"> 
     Long html with different form fields...... 
    </div> 
    <div id="interestTopic_3"> 
     Long html with different form fields...... 
    </div> 
    <div id="interestTopic_4"> 
     Long html with different form fields...... 
    </div> 
    <div id="interestTopic_5"> 
     Long html with different form fields...... 
    </div> 
</div> 

Я хочу, чтобы добавить «interestTopic» DIV в step_2 деления с динамически на основе V ales selection from step_1, Каждый интересTopic может содержать различные текстовые поля/входные элементы управления. Как я могу добавить этот div динамически, а также хочу использовать элементы управления ввода внутри div в тех же js, из которых я добавил, что div .. Возможно ли это без вызова сервера ? Я попытался просто скрыть/показать, но при загрузке страницы, а затем заполнение первой формы длиной HTML причина страницы заморозить на 1-2 секунды

Answer 1

Вы можете обновить innerHTML из step_2 DIV с помощью .innerHTML так:

document.getElementById("step_2").innerHTML ="<your new div based on the user selection from step 1>"; 

Этот подход даст вам только один div внутри вашего шага step_2. В качестве альтернативы вы можете поместить все divs изначально в DOM с дисплеем: none, а затем показать желаемый div для каждого входа пользователя.

Answer 2

Попробуйте это. Для вашей справки здесь я добавил «interestTopic» div в «step_2» div как ребенок динамически через нажатие кнопки с полем ввода.

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 with different form fields...... 
 
     </div> 
 
     <div id="interestTopic_2"> 
 
      Long html with different form fields...... 
 
     </div> 
 
     <div id="interestTopic_3"> 
 
      Long html with different form fields...... 
 
     </div> 
 
     <div id="interestTopic_4"> 
 
      Long html with different form fields...... 
 
     </div> 
 
     <div id="interestTopic_5"> 
 
      Long html with different form fields...... 
 
     </div> 
 
    </div> 
 
    <button id="add">Add New Div</button>