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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Vue实现图片与文字混输效果
Dec 04 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
PHP5 字符串处理函数大全
2010/03/23 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php实现的CSS更新类实例
2014/09/22 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python操作文件的参数整理
2019/06/11 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python自动生成证件号的方法示例
2021/01/14 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
车辆工程专业求职信
2014/04/28 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年科室工作总结
2015/04/10 职场文书
法律服务所工作总结
2015/08/10 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android