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 解析url的search方法
Feb 09 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
js实现日历的简单算法
Jan 24 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 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(二)
2012/03/21 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP微信分享开发详解
2017/01/14 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python处理document文档保留原样式
2019/09/23 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
pytorch中index_select()的用法详解
2021/01/06 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
为什么需要版本控制?
2013/08/08 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
一年级学生期末评语
2014/04/21 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
年度评优评先方案
2014/06/03 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书