相关：

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基础的更多相关文章

  1. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  2. ASP.NET动态添加用户控件的方法

    本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返 ...

  3. 动态添加easyui 控件

    jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...

  4. 动态绑数据(GridView控件Header和ItemTemplate)

    想了解此篇文章,建议先预习一下<动态变更GridView控件列名>http://www.cnblogs.com/insus/p/3232057.html,因为多少有些关联.不管怎样,它能够 ...

  5. 如何在VS2010中添加ActiveX控件及使用方法

    方法1: 1.首先在在项目上面右击添加类,如下图所示: 2.点击添加ActiveX控件中的MFC类 3.找到需要添加的ActiveX类. 4.点击完成即可. 5.此时转到资源视图,打开如下视图.可能工 ...

  6. wpf控件开发基础(3) -属性系统(2)

    原文:wpf控件开发基础(3) -属性系统(2) 上篇说明了属性存在的一系列问题. 属性默认值,可以保证属性的有效性. 属性验证有效性,可以对输入的属性进行校验 属性强制回调, 即不管属性有无发生变化 ...

  7. wpf控件开发基础(4) -属性系统(3)

    原文:wpf控件开发基础(4) -属性系统(3) 知识回顾 接上篇,上篇我们真正接触到了依赖属性的用法,以及依赖属性的属性元数据的用法,并且也实实在在地解决了之前第二篇提到的一系列问题.来回顾一下 属 ...

  8. wpf控件开发基础(2) -属性系统(1)

    原文:wpf控件开发基础(2) -属性系统(1) 距离上篇写的时间有1年多了.wpf太大,写的东西实在太多,我将依然围绕着自定义控件来展开与其相关的技术点. 也欢迎大家参与讨论.这篇我们将要讨论的是W ...

  9. WPF 中动态创建和删除控件

    原文:WPF 中动态创建和删除控件 动态创建控件 1.容器控件.RegisterName("Name",要注册的控件)   //注册控件 2.容器控件.FindName(" ...

随机推荐

  1. NOIP 总结

    NOIP 总结 实在不知道写什么标题 决定还是把我的noip总结贴上来,毕竟保存还是挺麻烦的. 扯淡 联赛考完有三个星期了,成绩也出了一个星期左右了. 终于还是决定动笔写一点联赛的总结. Day1 可 ...

  2. [Uva10601]Cubes

    [Uva10601]Cubes 标签: 置换 burnside引理 题意 给你12跟长度相同的小木棍,每个小木棍有一个颜色.统计他们能拼成多少种不同的立方体.旋转后相同的立方体认为是相同的. 题解 这 ...

  3. SqlBulkCopy 参数配置示例

    SqlBulkCopy  做为SQL Server 官方 批量入库类,性能不会太差.针对其参数做了一些测试.   A. 先准备测试场景 ,关于SqlBulkCopyOptions.KeepIdenti ...

  4. 【学习笔记】Hibernate 注解 （Y2-1-9）

    Hibernate注解 1.什么是注解在类上或者方法上打上其他类型的类型元数据 @标志 使用过的注解: @override  方法重写 @Test Junit 单元测试 @Before 单元测试 @A ...

  5. POI导出EXCEL，浏览器不兼容,文件名称乱码，文件无法打开解决方法

  6. C# Swagger 生成接口文档

    一直听说Swagger是做Web API文档的好工具,这次手里暂时没什么事,类体验下它的强大之处.下面是使用Swashbuckle.net 给asp.net web API添加文档的简要步骤. 参考地 ...

  7. 通过Yii来理解MVC

    模型:是表现业务数据.规则和逻辑的对象. 可以通过集成yii\base\Model或者它的子类定义模型类. 基类yii\base\Model支持许多实用的特性: A 属性:表现业务数据,可以像普通类属 ...

  8. Centos下_MysqL5.7在使用mysqldump命令备份数据库报错：mysqldump: Got error: 1449: The user specified as a definer ('fk_system'@'localhost') does not exist when using LOCK TABLES

    在阿里云服务器增加一个shell脚本定时备份数据库脚本执行任务时,测试性的执行了备份命令,如下 [root@iZ2ze503xw2q1fftv5rhboZ mysql_bak]# /usr/local ...

  9. 《清华梦的粉碎》by王垠

     清华梦的诞生 小时候,妈妈给我一个梦.她指着一个大哥哥的照片对我说,这是爸爸的学生,他考上了清华大学,他是我们中学的骄傲.长大后,你也要进入清华大学读书,为我们家争光.我不知道清华是什么样子,但是我 ...

  10. SpringBoot+gradle+idea实现热部署和热加载

    前言 因为之前使用myeclipes的同学就知道,在使用myeclipes的时候,java文件或者jsp文件写完之后会被直接热加载到部署的容器中,从而在开发的时候,不同经常去重启项目,从而达到了增加开 ...