我读过很多关于动态添加字段集的博客和帖子，但它们都给出了非常复杂的答案。我需要的并没有那么复杂。
我的 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 感兴趣属性(例如 name="member"+i 用于每个动态生成的 <input> s，如果它们要以表单形式提交的话。
请注意，您还可以创建 <br/>带有 document.createElement('br') 的元素.如果你只想输出一些文本，你可以使用 document.createTextNode()相反。
此外，如果您想在每次填充容器时清除容器，您可以使用 hasChildNodes()和 removeChild()在一起。
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
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 中的工作示例.
关于javascript - 动态创建特定数量的输入表单元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14853779/