如何在使用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？

回答

相关问题