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>

我想添加＆＃34; interestTopic＆＃34;基于step_1中的值选择动态div到step_2 div，每个interestTopic可能包含不同的文本字段/输入控件。如何动态添加这个div，并且还想在div中使用div中的输入控件，我添加了div。没有服务器呼叫，这可能吗？我尝试了简单的隐藏/显示但是当你加载一个页面然后填写第一个表格长html导致页面冻结1-2秒

Answer 1

试试这个。为了您的参考，我通过按钮点击输入框动态地将“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>

Answer 2

您可以使用.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中，并显示：none，然后显示每个用户输入所需的div。

如何使用jquery动态地将html加载到div中？

2 个答案: