Question

我有一个＆＃39; users page＆＃39;。我想给textbox输入一个号码。用户点击submit＆＃39; n＆＃39;不需要向用户呈现用户表单。

User1

first name - 

last name -

User2

first name -

last name -

.
.
.

UserN

first name - 

last name -

我不知道＆＃39; N＆＃39;的价值。前期。因此，编写多个div＆＃39;是一个好主意。在我的HTML中。

要求：我希望拥有一个用户模板div。并复制模板＆＃39; n＆＃39;时间取决于＆＃39; n＆＃39;的值在textbox。但我也想要所有的divs＆＃39;有'user1', 'user2'等不同的ID。

除了用太多的＆＃39; divs＆＃39;填充我的HTML之外，我无法找到一种方法。需要帮助获得指定的要求。

寻找类似的模板： -

<div id="user-template" class="hidden">
      <label class="lbl"><b>Handle:</b></label><input type="text" id="first_name" value=""/>
</div>

想要id =＆＃34; user-template＆＃34;改变所有新的div。

Answer 1

一种简单的方法是编写一个获取n值的函数，并返回可以附加到页面上某个父元素的实际dom。下面是一个简单的例子：

function createNDivs(n) {
  if(!n) return;

  var fragment =document.createDocumentFragment();
  for(var i=0;i<n;i++) {
       var div = document.createElement('div');
       fragment.appendChild(div);
   }

   return fragment;
}

Answer 2

您可以尝试使用this：

您可以创建一个模板，并将其附加到DOM中，以输入在输入字段中输入的数字。

$(document).ready(function() {
  $("#createForms").click(function() {
    var numOfForms = $("#numOfForms").val();
    var template = $('#hidden-template').html();
    for (var i = 0; i < numOfForms; i++) {
      $('#targetDiv').append("<p>User" + (i + 1) + ":</p>");
      $('#targetDiv').append(template);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="numOfForms"></input>
<input type="button" id="createForms" value="Get Fields"></input>

<div id="targetDiv"></div>


<script id="hidden-template" type="text/x-custom-template">
  <div id="user-template" class="hidden">
    <p>First Name:
      <input type="text" name="firstName"></input>
    </p>
    <p>Last Name:
      <input type="text" name="lastName"></input>
    </p>
    <br>
  </div>
</script>

具有相同模板的多个div

2 个答案: