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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP insert语法详解
2008/06/07 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python语言使用技巧分享
2016/05/31 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
用python对oracle进行简单性能测试
2020/12/05 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
企业面试题试卷附带答案
2015/12/20 面试题
买房协议书
2014/04/11 职场文书
产品生产计划书
2014/05/07 职场文书
主题实践活动总结
2014/05/08 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2015年护士节活动总结
2015/02/10 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
创业计划书之养殖业
2019/10/11 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Spring整合Mybatis的全过程
2021/06/28 Java/Android
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL