如何動態生成輸入字段

Question

我有一個帶有輸入字段的表單。

一次，我單擊了提交按鈕，我想生成一個帶有“ plus / +”圖標的2個輸入字段。 因此，當我單擊“ +”圖標時，它將生成輸入字段。

這是html部分：

 <label>Name</label>
 <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
 <label>Id</label>
 <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">

<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>

Answer 1

我建議看看現有的插件（例如-Jquery SheepIt！插件），並查看其編碼方式。

要動態添加表單元素，可以使用clone（）方法和DocumentFragment- http://ejohn.org/blog/dom-documentfragments/

Answer 2

$（“。addInput”）。click（function {$（“ form”）。append（ PUT INPUT ELEMNT HERE ）;}）;

Answer 3

http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT上的工作示例

<script type="text/javascript">
  function addFields () {
  var newNode1 = document.createElement('input'),
     newNode2 = document.createElement('input');
   newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1);
    document.forms[0].appendChild(newNode2);
  }
</script>
  <form>  
  <label>Name</label>
    <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/>
    <label>Id</label>
    <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">

   <button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button>
</form>

Answer 4

看一下這個。
HTML

<label>Name</label>
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" />
<label>Id</label>
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium">
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button>
<div id='add'></div>  

jQuery的

$('#demo_add').click(function () {
    $inputName = "<input type='text' placeholder='Name'/>";
    $inputId = "<input type='text' placeholder='Id'/>";
    $br = "<br/>";
    $('#add').append($inputName);
    $('#add').append($inputId);
    $('#add').append($br);
});  

希望它會有所幫助。