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 17 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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 清除网页病毒的方法
2008/12/05 PHP
PHP中设置时区方法小结
2012/06/03 PHP
php异常处理使用示例
2014/02/25 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python使用marshal模块序列化实例
2014/09/25 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
我们的节日元宵节活动总结
2015/02/06 职场文书
教师素质教育心得体会
2016/01/19 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android