如何在使用jquery動態加載html到div？

-1

我有兩個文件myPage.html下，PageLogic.js基於用戶選擇了他的興趣（下拉/單選按鈕） step_2事業部是如何在使用jquery動態加載html到div？

HTML頁面中包含的多步的形式

在第一步可見的（步驟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>

我想DIV動態基於v添加「interestTopic」的div step_2可以從step_1中選擇，每個interestTopic可以包含不同的文本字段/輸入controls.How可以動態地添加此div，也希望在div中使用輸入控件在相同的js從我添加該div .. 這是可能的沒有服務器調用？我想簡單的隱藏/顯示，但是當你加載一個頁面，然後填寫第一種形式長HTML頁面事業凍結1-2秒

來源

2015-07-11 Neo Jekson

仍面臨什麼問題？ –

-1

可以使用.innerHTML這樣的更新step_2 DIV的innerHTML：

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

這種方法只會讓你在step_2 div中有一個div。或者，您可以將所有div初始放入DOM：display：none，然後顯示每個用戶輸入所需的div。

來源

2015-07-11 07:09:09

爲什麼不使用'$（'＃step_2'）。html（「」）;'？ – Shakeel

'innerHTML'不是jq對象的有效屬性 –

@AWolff我的不好:(謝謝指出它。已更新腳本 –

試試這個。爲了您的參考，我在此將「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>

來源

2015-07-11 07:30:46

請讓我知道這個答案是否有幫助。 –

如何在使用jquery動態加載html到div？

回答

相關問題