通过JavaScript动态生成html控件

最新推荐文章于 2022-10-14 18:33:30 发布
最新推荐文章于 2022-10-14 18:33:30 发布
阅读量982 收藏 5
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/341770
版权

示例代码

复制代码 
<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. 删除后的页面







本文转自jihite博客园博客，原文链接：http://www.cnblogs.com/kaituorensheng/p/4552594.html，如需转载请自行联系原作者

weixin_34357962
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js动态生产html元素,js 动态创建 html元素
weixin_28928039的博客
06-07 1358
js 动态创建 html元素js学习之动态创建html元素body{margin:0;padding:0;}.sky{background:#000;width:1000;height:500px; position:relative;}#s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;}没...
Javascript动态创建控件
guoguo1980的专栏
08-18 2765
 html>head>title>title>script language="javascript" type="text/javascript">function createElement(tagName, type){   var element = null;   try   {      element = document.createElement( + tagName +
js动态生成html
懒虫的博客
10-11 3580
1、生成html 动态生成showView <div class="showView"> </div> 异步获取数据： var del_id = ""; function del(e,notice_id) { del_id = notice_id; $(".del_modal_id").val(del_id) $.ajax({ url: "/admin/samproofing/getNotice", type
原生JS动态创建html，实现瀑布流布局-
weixin_57098738的博客
04-23 1952
首先在server(node)文件夹下打开cmd,node server 将服务器运行起来,端口号默认是3000 在index.html使用fetch请求服务器返回的数据（API地址:localhost:3000） 根据服务端返回的数据重新包装成2维数组（左右各一列） 假设后台返回的数组里有10个元素，拆分后，左边5元素，右边5元素。奇数放左边，偶数放右边 // // 创建多维度数组 // function mxsColumnsArr(colums, ori..
用js动态生成html页面
热门推荐
qq_33417237的博客
04-04 4万+
首先思路明确：生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。以下就json格式存储的数据，简单示例一下：第一步：获取attribute数据var url = window.android.get...
js动态生成checkBox控件以及根据不同选项加载不同的下拉框
stefanie0404的博客
10-14 735
js动态生成checkBox控件以及根据不同选项加载不同的下拉框
JavaScript动态生成控件赋事件
04-01
在网页中，我们经常需要动态生成控件并为其赋予事件，这在JavaScript中是一项基本但至关重要的技能。这篇博客文章可能详细阐述了如何通过JavaScript实现这一功能。 动态生成控件通常涉及到DOM（Document Object ...
javascript万年历控件
11-24
总结，JavaScript万年历控件是Web开发中的一个重要组件，它通过JavaScript、HTML和CSS技术实现了动态、交互式的日期选择功能。开发者可以根据实际需求选择自定义实现、使用库或插件化开发。无论是在日常的Web表单中...
如何通过javascript操作web控件的自定义属性
10-26
总的来说，通过JavaScript操作Web控件的自定义属性，我们可以实现更灵活的客户端逻辑，如验证、动态行为和增强的用户体验。这种方法的关键在于理解DOM的使用，以及如何在JavaScript和服务器端代码之间交互数据。同时...
JavaScript实现的日期控件具体代码
10-26
总的来说，这个JavaScript日期控件通过自定义的CSS和JavaScript实现了动态的日历显示，允许用户方便地选择日期并将其插入到指定的输入字段。这样的控件在网页表单中非常常见，特别是在需要用户输入日期的场景下，极...
JS动态添加控件
09-17
JS动态添加控件 很好用，可自定义添加，适合初学者使用
JS动态创建html节点
08-11
1 var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement(""); FF.innerText = 'td'+ i; tt.appendChild(FF); } ...............
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
用js动态添加html元素,以及属性的简单实例
12-10
用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.style.position='absolute'; lswt_2.style.background='url(
OOP样式JavaScript菜单和其他控件
04-01
在ASP.NET中，可以使用`Page.ClientScript`类注册JavaScript函数，或者在服务器端代码中生成JavaScript代码，如： ```csharp Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowMenu", "myMenu.show()...
JavaScript动态生成控件的方法
KiGang的博客
10-21 3285
JavaScript动态生成控件的方法 这个是在项目里面遇到的问题，这个是一个Test，不过还是没有找到从页面映射数据到后台的方法，boss给出的方法是用json来传递数据，不过我还是不是很懂。下面是动态生成控件的代码。<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/co
php 向html追加元素,如何动态生成html元素以及为元素追加属性的方法介绍（附代码）...
weixin_36154762的博客
04-01 673
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码)，内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。动态生成HTML元素的方法有三种：第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点var link = document.createElement('a');link.setA...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
MuYIShan1的博客
04-09 4039
js 动态生成htmltable标签中内容js生成html代码js代码 table标签中内容js生成 html代码 <div> <table id="message-table" > <thead> <tr > <th class="text-center hidden-xs">...
JS创建HTML控件并动态生成页面的写法
最新发布
05-25
JS可以通过以下几种方式创建HTML控件并动态生成页面： 1. 使用document.createElement()方法创建元素节点，并使用appendChild()方法将其添加到DOM树中。 ```javascript // 创建一个div元素 var div = document.createElement('div'); // 设置div的文本内容 div.innerHTML = 'Hello World!'; // 将div添加到body中 document.body.appendChild(div); ``` 2. 使用innerHTML属性动态生成页面，可以通过字符串拼接的方式生成HTML代码，然后将其赋值给innerHTML属性。 ```javascript // 生成一个ul列表 var ul = '<ul>'; for (var i = 1; i <= 10; i++) { ul += '<li>Item ' + i + '</li>'; } ul += '</ul>'; // 将ul添加到body中 document.body.innerHTML = ul; ``` 3. 使用模板字符串（template literals）动态生成页面，可以使用反引号（`）来包裹HTML代码，然后将其赋值给innerHTML属性。 ```javascript // 生成一个ul列表 var ul = `<ul>`; for (var i = 1; i <= 10; i++) { ul += `<li>Item ${i}</li>`; } ul += `</ul>`; // 将ul添加到body中 document.body.innerHTML = ul; ``` 以上三种方式都可以实现动态生成HTML页面的效果，具体使用哪种方式取决于个人习惯和需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值