如何动态生成输入字段

Question

我有一个带输入字段的表单。

有一次，我点击了提交按钮我要生成2个输入字段，其中包含＆＃34;加/ +＆＃34;图标。所以，当我点击＆＃34; +＆＃34;它会生成输入字段的图标。

这是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！Plugin），看看它是如何编码的。

要动态添加表单元素，可以使用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

<强> Check this out.
的 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);
});  

希望它有所帮助。