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入门教程(12) js对象化编程
Jan 31 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue实现前端分页完整代码
Jun 17 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
检测png图片是否完整的php代码
2010/09/06 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python日期操作学习笔记
2008/10/07 Python
python解析xml文件实例分享
2013/12/04 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
python制作朋友圈九宫格图片
2019/11/03 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python加速程序运行的方法
2020/07/29 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
个性大学生自我评价
2013/12/04 职场文书
家长给学校的建议书
2014/05/15 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript