JavaScript动态添加Form表单元素示例
本文介绍利用JavaScript动态添加Form表单元素的方法。通过cloneNode克隆节点并填充内容，实现游戏截图等不定数量文件的上传功能。
JavaScript动态添加Form表单元素示例
本文介绍利用JavaScript动态添加Form表单元素的方法。
此前曾发布过类似文章（如：javascript实现的动态添加表单元素input,button等），相比之下，本文提供更为简洁实用的方案。
应用场景：后台需要上传游戏截图，由于截图数量不确定，因此采用动态添加input节点的方法来实现这一功能。
主要涉及以下函数：
document.getElementById();
objNode.parentNode;
objNode.cloneNode();
objNode.removeAtrribute();
objNode.innerHTML();
objNode.appendChild();
HTML代码：
<div class="well well-sm">
<div class="form-group">
<label class="form-label">游戏截图:</label>
<input type="file" name="jietu[]" class="form-input">
<span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span>
</div>
<div class="form-group" id="add_jietu">
<label class="form-label">游戏截图:</label>
<input type="file" name="jietu[]" class="form-input">
</div>
</div>
JavaScript代码：
<script type="text/javascript">
function add_jietu()
{
var add_jietu = document.getElementById('add_jietu');
var nodeFather = add_jietu.parentNode;
var node_clone = add_jietu.cloneNode();
content = add_jietu.innerHTML;
node_clone.removeAttribute('id');
node_clone.innerHTML = content;
nodeFather.appendChild(node_clone);
}
</script>
注意事项：
1. js第6行使用了"克隆节点"函数，克隆后的节点内部不包含HTML内容，需通过第9行的代码进行填充。
2. 使用克隆功能是因为该方法生成的变量类型为"节点类型"，这样才能作为参数传入appendChild()函数。
3. 节点的 nextSibling 和 lastChild 属性返回的变量类型为 Text类型（在chrome的调试窗口中观察到）。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表单(form)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18