Js为表单动态添加节点内容的方法


Posted in Javascript onFebruary 10, 2015

本文实例讲述了Js为表单动态添加节点内容的方法。分享给大家供大家参考。具体如下:

1. 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>增加节点</title>  

<script type="text/javascript">  

   function newPicture() {  

       var picElement = document.createElement("img");  

       picElement.src = "images/success.jpg";  

       picElement.width = 100;  

       picElement.height = 100;  

       document.body.appendChild(picElement);  

   }  

     

   function newNode() {  

       var olElement = document.getElementById('answers');  

       var liElement = document.createElement('li');  

         

       var inputElement = document.createElement('input');  

       inputElement.type = "text";  

       inputElement.name = "answer";  

         

       liElement.appendChild(inputElement);  

       olElement.appendChild(liElement);  

   }  

</script>  

</head>  

  

<body>  

 <div>  

    <input type="button" name="button" value="增加一张图片" onclick="javascript:newPicture();"/>     

    <input type="button" name="button" value="增加一个选项" onclick="javascript:newNode();"/><br />  

    <ol id="answers">  

        <li><input type="text" name="answer" /></li>  

    </ol>  

 </div>  

</body>  

</html>

2. 程序效果图:

Js为表单动态添加节点内容的方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript几个易错点记录
Nov 26 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
jQuery前端分页示例分享
Feb 10 #Javascript
js进行表单验证实例分析
Feb 10 #Javascript
EasyUi datagrid 实现表格分页
Feb 10 #Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 #Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 #Javascript
JS数组的常见用法实例
Feb 10 #Javascript
bootstrap table 服务器端分页例子分享
Feb 10 #Javascript
You might like
基于pear auth实现登录验证
2010/02/26 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python用700行代码实现http客户端
2021/01/14 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技