您可以使用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(){
// 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中的工作示例。