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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python入门篇之字典
2014/10/17 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
目前最全的python的就业方向
2018/06/05 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
pytorch forward两个参数实例
2020/01/17 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
类如何去实现接口
2013/12/19 面试题
班主任工作年限证明
2014/01/12 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
小学生运动会报道稿
2014/09/12 职场文书
少年雷锋观后感
2015/06/10 职场文书
毕业生入职感言
2015/07/31 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
python实现语音常用度量方法的代码详解
2021/05/25 Python