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 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
javascript数组的使用
Mar 28 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
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 中的str_replace 函数总结
2007/04/27 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
理想高通滤波实现Python opencv示例
2019/01/30 Python
python实现Virginia无密钥解密
2019/03/20 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python unichr函数知识点总结
2020/12/16 Python
住房公积金接收函
2014/01/09 职场文书
运动会稿件100字
2014/09/24 职场文书
公司感谢信范文
2015/01/22 职场文书
2016春节慰问信范文
2015/03/25 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
职工食堂管理制度
2015/08/06 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python