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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
JavaScript效率调优经验
Jun 04 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
用console.table()调试javascript
Sep 04 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
浅析vue component 组件使用
Mar 06 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
使用webpack打包koa2 框架app
Feb 02 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使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python列表与元组详解实例
2013/11/01 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python模块future用法原理详解
2020/01/20 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python不同版本的_new_不同点总结
2020/12/09 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
室内设计自我鉴定
2013/10/15 职场文书
区三好学生主要事迹
2014/01/30 职场文书
财务情况说明书范文
2014/05/06 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
委托书的写法
2014/09/16 职场文书
个人工作总结范文2014
2014/11/07 职场文书
英语邀请函范文
2015/02/02 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python