我读过关于动态添加字段集许多博客和帖子，但他们都给出了一个非常复杂的答案。 我要求并不复杂。
我的HTML代码：
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
因此，用户将进入一个整数值（我检查使用JavaScript验证）在input字段中。 而就点击Fill Details的链接，就会出现输入字段的相应数量的他进入。 我想要实现这个使用JavaScript。
我不是在JavaScript中的亲。 我在想我怎么可以检索用户填写在整数input通过链接字段和显示对应的输入字段的数量。
你可以使用onclick以获取文本字段输入值事件处理程序。 请确保你给该领域的唯一id属性，这样就可以通过引用它安全document.getElementById()
如果你想动态添加元素，你应该有一个容器，其中放置它们。 例如， <div id="container"> 。 创建借助于新的元素document.createElement()并使用appendChild()到它们中的每追加到容器中。 你可能会感兴趣的输出有意义name属性（例如name="member"+i为每个动态生成的<input>如果他们是在一个形式提交秒。
请注意，你还可以创建<br/>的元素document.createElement('br') 如果你想只输出一些文字，就可以使用document.createTextNode()来代替。
另外，如果你想每次即将被填充时间来清除容器，你可以使用hasChildNodes()和removeChild()在一起。
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Number of inputs to create
var number = document.getElementById("member").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container"/>
</body>
</html>
请参阅本工作示例的jsfiddle 。
试试这个jQuery代码中动态包含表单，字段，删除/删除行为：
$(document).ready(function() { var max_fields = 10; var wrapper = $(".container1"); var add_button = $(".add_form_field"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box } else { alert('You Reached the limits') } }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container1"> <button class="add_form_field">Add New Field <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div><input type="text" name="mytext[]"></div> </div> 请参阅演示在这里
