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 相关文章推荐
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
js实现购物车商品数量加减
Sep 21 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
一个用php实现的获取URL信息的类
2007/01/02 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
php无限遍历目录示例
2014/02/21 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python属于解释语言吗
2020/06/11 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
工地安全质量标语
2014/06/07 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫