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实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
详解redux异步操作实践
2018/08/15 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python抓取框架 Scrapy的架构
2016/08/12 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
anaconda如何查看并管理python环境
2019/07/05 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
大学生专科毕业生自我评价
2013/11/17 职场文书
上班离岗检讨书
2014/09/10 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书