比较好玩的动态添加网页元素
比较好玩的动态添加网页元素
javascript 有一些很有趣的功能。下面介绍三样小功能。
1.动态创建按键
2动态创建链接
3动态创建表格
效果如下:
源代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
var divMain = document.getElementById('divMain');
var input = document.createElement("input");
input.type = "button";
input.value = "我是动态按钮";
divMain.appendChild(input);
}
function linkCreate() {
var divlink = document.getElementById("divlink");
var link = document.createElement("a");
link.href = "http://www.baidu.com";
link.innerText = "百度";
divlink.appendChild(link);
}
function tableCreate() { var data = { "google":"http://www.google.com","搜狐":"http://www.souhu.com","百度":"http://www.baidu.com" }
var tablediv = document.getElementById("tablediv");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>"+value+"</a>";
tr.appendChild(td2);
tablediv.appendChild(tr);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divMain">
</div>
<div id="divlink">
</div>
<div id="tablediv">
</div>
<input id="Button1" type="button" value="动态创建按钮" id="Button2"
type="button" value="动态创建链接" /><input id="Button3" type="button"
value="创建一个链接的表格" />
</form>
</body>
</html>
本文转自gauyanm 51CTO博客,原文链接:http://blog.51cto.com/gauyanm/422284,如需转载请自行联系原作者
比较好玩的动态添加网页元素相关推荐
- 给动态生成的id标签添加html,比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格 效果如下: 源代码如下: function btnClic ...
- jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- 动态添加html元素
document.createElement()创建元素,再用appendChild( )添加 动态引入jquery: var scriptElement=document.createElement ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 动态添加html元素绑定事件,关于javascript:jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素 但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- Bootstrap3动态添加的元素tooltip不生效
文章目录 现象 抄代码看这里 现象 使用tooltip的时候,发现动态添加的元素,鼠标移上去不会出现tooltip. 然后官方文档找到GitHub上一个issue解决了 抄代码看这里 // 动态添加的 ...
- 原生js 给动态添加的元素添加(事件监听器)
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
- JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
最新文章
- celery-04-操作b-执行人的一方
- python中的json函数_python中装饰器、内置函数、json的详解
- php 写入内存缓存,示例:通过内存缓存来提升性能
- eclipse中如何搜索带\的字串
- java初级程序员必备的算法和数据结构入门只是,编程界的敲门砖,算法合集,简单详细
- 报表工具如何实现多次导入Excel
- Java基础—封装继承多态(详细)
- 破解钉钉旧版本强制更新(实现旧版本登录)
- 三角函数正交性的推导
- Go语学习笔记 - gorm使用 - gorm处理错误 Web框架Gin(十)
- Pycharm远程调试服务器代码出错:[Errno 2] No such file or directory
- 决策模型(二):风险决策法
- 当百度也来玩众筹,是否可以为众筹正名?
- 基于Keras的LSTM多变量时间序列预测(北京PM2.5数据集pollution.csv)
- Win7下安装Ubuntu11.10(解决linux try(hd0,0):NTFS5:no ang0引导问题)
- Python写一个简洁拼写检查器
- 用opencv做一个头像
- MIPS单周期CPU设计(24条指令)
- 【SQL】基本SQL数据表(学生、老师、课程、成绩)
- 千峰python培训机构
热门文章
- [转] 撞车之后,不要傻里傻气的!
- 用成交量判断股价走势是否正常
- 据说,上海AI产业规模700亿,包揽全国1/3人才
- 阿里AI解锁车场景:达摩院技术输出,天猫精灵进驻奔驰、奥迪和沃尔沃
- 纯css 无视宽高设置垂直水平居中
- [Vue warn]: Attribute id is ignored on component div because the component is a fragment instanc
- hdu 5596 GTW likes gt
- C# 获取COM控件注册状态,注册以及反注册COM控件
- 本机找不到workstation 和 Computer Browser服务
- Spring boot如何打war包发布到tomcat