动态地添加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(" ...
随机推荐
- (转载)Java:按值传递与按引用传递
原链接:传送门 前天在做系统的时候被Java中参数传递问题卡了一下,回头查阅了相关的资料,对参数传递问题有了新的了解和掌握,但是有个问题感觉还是很模糊,就是Java中到底是否只存在值传递,因为在查阅资 ...
- bzoj2876 [NOI2012]骑行川藏(拉格朗日乘数法)
题目描述 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因此在每天的骑行 ...
- install atom markdown preview plus error
Installing "markdown-preview-enhanced@0.15.2" failed.Hide output- npm ERR! Darwin 17.2.0 n ...
- Win7 64位操作系统中搭建C/C++的编译环境
通常使用IDE工具为 VS2010 .但是如果仅仅只是想在Windows中使用命令行对C/C++源码进行编译和运行.则需要使用 CL 命令方式或另外安装 Cygwin / MinWin 命令行编译器. ...
- 集合的综合练习:Poker牌
/* 刘意教程示例:*/ package cn.onecool.cot; import java.util.ArrayList; import java.util.Collections; impor ...
- 大型互联网公司Java开发岗位面试题归类!
一.Java基础 1. String类为什么是final的. 2. HashMap的源码,实现原理,底层结构. 3. 说说你知道的几个Java集合类:list.set.queue.map实现类咯.. ...
- Linux 编译安装 php 扩展包 curl
php源码目录:/root/php php编译目录:/usr/local/webserver/php/ curl源码目录:/root/curl 1.curl,主要用于发送http请求,是php的一个扩 ...
- unix网络编程环境搭建
unix网络编程环境搭建 网络编程 环境 1.点击下载源代码 可以通过下列官网中的源代码目录下载最新代码: http://www.unpbook.com/src.html 2.解压文件 tar -xz ...
- mac中的myeclipse的控制台中文乱码问题解决办法
之前写java用到控制台的主要是字符和数字,中文输入貌似真的还没用过,所以就遇到了一个悲剧的老问题,估计每个程序员都会遇到——中文乱码. 用的是MyEclipse开发环境,Window->Gen ...
- Python基础——字符串
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ 在Python中,字符串也是一种数据类型.相比其它数据类型,字符串算是比较复杂的.为何呢?因为字符串不仅包含英文字母 ...