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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 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
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
composer.lock文件的作用
2016/02/03 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
php之可变函数的实例详解
2017/09/13 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
js命名空间写法示例
2015/12/18 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python读大数据txt
2016/03/28 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
幼儿园大班家长评语
2014/04/17 职场文书
党务公开方案
2014/05/06 职场文书
学校师德师风整改措施
2014/10/27 职场文书
新学期主题班会
2015/08/17 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js