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 通过模式匹配实现重载
Aug 12 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python3使用GUI统计代码量
2019/09/18 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
成绩报告单家长评语
2014/12/30 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
首都博物馆观后感
2015/06/05 职场文书
怎样写观后感
2015/06/19 职场文书
外科护士长工作总结
2015/08/12 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers