示例代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

<title>动态生成控件</title>

<script>

var i=1;

function add()

{

    var top = document.getElementById("top");

    var div = document.createElement("div");

    var input = document.createElement("input");

    var del = document.createElement("input");

    div.innerHTML="学生" + i + " ";

    div.id = i; 

    input.type = "text";

    input.name = "v";

    input.value = "jihite";

    input.id = "v" + i;

    del.type = "button";

    del.name = "d";

    del.value = "删除";

    del.id = 'd' + i;

    del.onclick = function remo()

        {

            alert("删除学生：" + input.value);

            top.removeChild(div);

        };

    i = i + 1;

    div.appendChild(input);

    div.appendChild(del);

    top.appendChild(div);

}

</script>

</head>

<body>

<div>

    <input type="button" onclick="add()" value="添加" />

</div>

<div id="top">

</div>

<div id="output">

</div>

</body>

</html>

效果

1. 开始页面

2. 点击添加按钮

3. 修改学生姓名

4. 点击删除

5. 删除后的页面

通过JavaScript动态生成html控件的更多相关文章

  1. 动态生成PictureBox控件，涉及：PictureBox控件和flowLayoutPanel面板

    一.概述 flowLayoutPanel面板是一系列控件的容器,有关详细的使用方法留待以后总结. 二.问题提出 问题提出:点击按钮,扫描指定文件夹并将其中的所有图片放在flowLayoutPanel面 ...

  2. 第二章实例：动态生成View控件例子---小球跟随手指滑动

    package mydefault.packge; import android.app.Activity; import android.content.Context; import androi ...

  3. form中动态生成Radiobutton控件

    public partial class GetLabelFields : Form { int tableCount; public GetLabelFields(AxMapControl axma ...

  4. WinForm用户控件、动态创建添加控件、timer控件--2016年12月12日

    好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3       0 0     用户控件: 通过布局将多个控件整合为一个控件,根据自己的需要进行修改,可对用户控件内的所有控件及控件属性进行修 ...

  5. Pyqt 动态的添加控件

    Pyqt 动态的添加控件 # -*- coding: utf-8 -*- from PyQt4.QtCore import * from PyQt4.QtGui import * import sys ...

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

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

  7. 袁创：使用反射动态调用ActiveX控件

    ■■■■前言 目前的基于.NET平台的软件研发中仍然存在大量的对COM及ActiveX控件的调用.使用C#调用ActiveX控件时一般是使用vs.net工具自动生成的互操作性程序集.这种方法操作简单, ...

  8. 使用反射动态调用ActiveX控件

    使用反射动态调用ActiveX控件 袁永福 2018-3-2 ■■■■问题描述: 目前的基于.NET平台的软件研发中仍然存在大量的对COM及ActiveX控件的调用.使用C#调用ActiveX控件时一 ...

  9. winform 用户控件、 动态创建添加控件、timer控件、控件联动

    用户控件: 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗 ...

随机推荐

  1. 多个fragment中重叠问题的解决方法

    这个方法适用性有限. 我的是一个mainActivity,然后下部四个按钮,点击时先隐藏所有的fragment,然后再new一个新的出来,如果存在,则直接显示出来,看上去一切都没有问题. 但是通过fr ...

  2. vs2017安装后自动应用许可证

    Vs2017专业版 "C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Common7\IDE\StorePI ...

  3. angular formBuilder

  4. 「BZOJ 2733」「HNOI 2012」永无乡「启发式合并」

    题意 你需要维护若干连通快,有两个操作 合并\(x,y\)所在的连通块 询问\(x\)所在连通块中权值从小到大排第\(k\)的结点编号 题解 可以启发式合并\(splay\),感觉比较好些的 一个连通 ...

  5. vi—终端中的编辑器

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  6. OC - runtime 之关联对象

    header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...

  7. php中的各种header整理

    <?php header('HTTP/1.1 200 OK'); // ok 正常访问 header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 heade ...

  8. iOS的本地推送删除不了解决方法

    最近在研究苹果推送,当测试本地推送的时候,发现一个问题,就是一旦你添加了一个本地推动的通知,当你修改代码,删除应用,当你再次运行app,它还是会在横幅上面弹出推送,尼玛怎么搞都删除不了,近乎崩溃了,开 ...

  9. Spring Cloud-服务的注册与发现之服务注册中心（Eureka Server）

    Spring cloud是为了什么产生的? 根据官网的这个介绍来看,我们可以知道,Spring cloud是为开发者提供的一个工具,而使用这个工具的产生就是为了帮助开发者快速的开发一套比较通用的分布式 ...

  10. EA添加时序图

    在项目浏览器的空白处右击 http://blog.csdn.net/craftsman1970/article/details/70877530 不同于大部分面向对象或者UML的书籍,在讨论完类图/对 ...