JavaScript实现动态添加Form表单元素的方法示例


Posted in Javascript onAugust 14, 2017

本文实例讲述了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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 #Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 #Javascript
JS原生数据双向绑定实现代码
Aug 14 #Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
关于在mongoose中填充外键的方法详解
Aug 14 #Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 #Javascript
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Bootstrap table使用方法记录
2017/08/23 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python字典的值可以修改吗
2020/06/29 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
美国折扣网站:jClub
2017/08/07 全球购物
公司开业庆典策划方案
2014/06/04 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
小学校园广播稿
2015/08/18 职场文书