动态地添加HTML控件-JavaScript基础
相关:
document对象的createElement()方法可以创建一个新的HTML控件(document.createElement("input");)
setAttribute()方法设置控件类型、设置控件的名称(otext.setAttribute("type","text");otext.setAttribute("name","username");)。
appendChild()方法将新的HTML控件插入到相应的元素的最后一个子节点后面( document.form.appendChild(obtn);)。
document.form.innerHTML = ""; 将内容设为空
1、示例代码
<!DOCYTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加html控件</title>
<style>
body{font-size: 12px}
.button{background-color: #03a9f4;color: white}
</style>
</head>
<body>
<form name="form">
<input type="button" class="button" value="添加文本框" onclick="addText()">
<input type="button" class="button" value="添加按钮" onclick="addBtn()">
<input type="button" class="button" value="删除所有控件" onclick="delElement()">
<br><br>用户名:
</form>
</body>
<script>
function addText() {
var otext = document.createElement("input");//创建input控件
otext.setAttribute("type","text");//设置控件类型
otext.setAttribute("name","username");//设置控件名称
document.form.appendChild(otext);//将控件添加到form节点子节点后面
}
function addBtn() {
var obtn = document.createElement("input");
obtn.type = "button";//设置类型为button
obtn.value = "确定";//设置控件显示的文字
document.form.appendChild(obtn);//将控件添加到form节点子节点后面
}
function delElement() {
document.form.innerHTML = "";//清空了所在页面
}
</script>
</html>
2、示例效果图
源码下载:动态添加HTML控件.zip
动态地添加HTML控件-JavaScript基础的更多相关文章
- 谨记给UpdatePanel中动态添加的控件赋ID
原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...
- ASP.NET动态添加用户控件的方法
本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返 ...
- 动态添加easyui 控件
jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...
- 动态绑数据(GridView控件Header和ItemTemplate)
想了解此篇文章,建议先预习一下<动态变更GridView控件列名>http://www.cnblogs.com/insus/p/3232057.html,因为多少有些关联.不管怎样,它能够 ...
- 如何在VS2010中添加ActiveX控件及使用方法
方法1: 1.首先在在项目上面右击添加类,如下图所示: 2.点击添加ActiveX控件中的MFC类 3.找到需要添加的ActiveX类. 4.点击完成即可. 5.此时转到资源视图,打开如下视图.可能工 ...
- wpf控件开发基础(3) -属性系统(2)
原文:wpf控件开发基础(3) -属性系统(2) 上篇说明了属性存在的一系列问题. 属性默认值,可以保证属性的有效性. 属性验证有效性,可以对输入的属性进行校验 属性强制回调, 即不管属性有无发生变化 ...
- wpf控件开发基础(4) -属性系统(3)
原文:wpf控件开发基础(4) -属性系统(3) 知识回顾 接上篇,上篇我们真正接触到了依赖属性的用法,以及依赖属性的属性元数据的用法,并且也实实在在地解决了之前第二篇提到的一系列问题.来回顾一下 属 ...
- wpf控件开发基础(2) -属性系统(1)
原文:wpf控件开发基础(2) -属性系统(1) 距离上篇写的时间有1年多了.wpf太大,写的东西实在太多,我将依然围绕着自定义控件来展开与其相关的技术点. 也欢迎大家参与讨论.这篇我们将要讨论的是W ...
- WPF 中动态创建和删除控件
原文:WPF 中动态创建和删除控件 动态创建控件 1.容器控件.RegisterName("Name",要注册的控件) //注册控件 2.容器控件.FindName(" ...
随机推荐
- xcode7中使用cocos2d-x3.8的webview控件
在XCode7中使用cocos2d-x 3.3以上版本的WebView控件时,碰到了编译错误 App Transport Security has blocked a cleartext HTTP ( ...
- 深入理解viewport
这篇文章我已写成pdf,建议直接下载浏览. 链接:https://pan.baidu.com/s/1c4cwd7E 密码:jty1 <对viewport标签的理解> --版权所有 @RYZ ...
- python的面向对象和面向过程
一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...
- SSE图像算法优化系列十七:一些图像处理中常用小过程的SSE实现。
在做图像处理的SSE优化时,也会经常遇到一些小的过程.数值优化等代码,本文分享一些个人收藏或实现的代码片段给大家. 一.快速求对数运算 对数运算在图像处理中也是个经常会遇到的过程,特备是在一些数据压缩 ...
- php分布式redis实现session共享
方法一:找到配置文件php.ini,修改为下面内容,保存并重启服务 session.save_handler = redis session.save_path = "tcp://127.0 ...
- Ubuntu配置Nginx虚拟主机和支持ThinkPHP
[Nginx配置虚拟主机] 每一个 server { listen 80; server_name www.a.com; ..... } 就表示一台虚拟域名, 然后对应的 ...
- 关于DOM与BOM的总结
1.什么是BOM,什么是DOM(基本概念) BOM: Browers Object MOdel 浏览器对象模型 DOM: Document Object MOdel ...
- bzoj 1188 [HNOI2007]分裂游戏 SG函数 SG定理
[HNOI2007]分裂游戏 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1394 Solved: 847[Submit][Status][Dis ...
- core java
ConsoleTest,这个程序如果在IDE里运行就会因无法获得控制台而报错 import java.io.Console; public class ConsoleTest { public sta ...
- 【BZOJ3993】 星际战争
Time Limit: 1000 ms Memory Limit: 128 MB Description 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战.在战斗的某一阶段,Y军团一 ...