我读过很多关于动态添加字段集的博客和帖子，但它们都给出了非常复杂的答案.我要求的并不是那么复杂.
我的HTML代码:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
因此，用户将在input字段中输入一个整数值(我正在使用javascript判断验证).点击Fill Details链接后，会出现相应数量的输入字段供他输入.我想使用javascript来实现这一点.
我不是javascript方面的专家.我在想如何通过链接检索用户在input字段中填写的整数，并显示相应数量的输入字段.
您可以使用onclick事件处理程序来获取文本字段的输入值.确保为该字段赋予唯一的id属性，以便可以在document.getElementById()中安全地引用它:
如果要动态添加元素，应该有一个容器来放置它们.例如，<div id="container">.通过document.createElement()创建新元素，并使用appendChild()将每个元素附加到容器中.您可能有兴趣输出一个有意义的name属性(例如，如果动态生成的<input>要以表单形式提交，则每个<input>都要输出name="member"+i).
请注意，您还可以使用document.createElement('br')创建<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中的工作示例.