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 进度条 实现代码
Jul 30 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
页面使用密码保护代码
Apr 10 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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中Smarty模板初体验
2011/08/08 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python3数字求和的实例
2019/02/19 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
天游软件面试
2013/11/23 面试题
毕业自荐信
2013/12/16 职场文书
创业融资计划书
2014/04/25 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题