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的实现简单的表格中增加或删除下一行
Aug 01 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
浅析Ajax语法
Dec 05 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 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中的静态变量的基本用法
2014/03/20 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
python基础教程之自定义函数介绍
2014/08/29 Python
Python中的闭包总结
2014/09/18 Python
Python pandas常用函数详解
2018/02/07 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
协议书格式
2014/04/23 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
通信工程求职信
2014/07/16 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
停发工资证明范本
2015/06/12 职场文书
李强感恩观后感
2015/06/17 职场文书
九年级历史教学反思
2016/02/19 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python