本文介绍如何在JavaScript中动态创建并添加表单元素。通过document.createElement创建input或button，设置type和name属性，最后利用appendChild方法将其追加至指定容器。示例包含完整HTML结构与JS函数，支持动态生成提交与重置按钮，并自动换行。
JavaScript动态添加表单元素：使用appendChild实现input与button
在开发小型系统时，经常需要动态生成表单元素。基于实际实现经验，整理出以下操作指南。
此类动态效果在各类网站中十分常见。
第一步，调用document.createElement方法创建所需的input元素。
var newInput = document.createElement("input"); 第二步，为新建元素配置相关属性，例如指定name和type等参数。
newInput.type=mytype;
newInput.name="input1"; 第三步，利用appendChild方法，将配置好的元素追加到目标标签内部。
TemO.appendChild(newInput); JavaScript核心实现代码如下：
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add");
var newInput = document.createElement("input");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");//创建一个BR标签是为能够换行！
TemO.appendChild(newline);
}
</script>
<html >
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add");
var newInput = document.createElement("input");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");
TemO.appendChild(newline);
}
</script>
<body>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield"><br>
</div>
</form>
<input name="" type="button" value="新建文本框" onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框" onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框" onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域" onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框" onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮" onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮" onClick="AddElement('reset')" />
</body>
</html>上述内容介绍了利用JavaScript动态添加表单元素（如input、button等）的方法，借助appendChild实现。希望本文能为您提供帮助。如有疑问，欢迎留言，小编将及时回复。感谢对本站的支持！