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 相关文章推荐
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
js实现直播点击飘心效果
Aug 19 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
2006/12/14 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年销售部工作总结
2014/12/01 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2015年档案室工作总结
2015/05/23 职场文书
网聊搭讪开场白
2015/05/28 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python