js 动态操作元素
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnImage').onclick = function () {
var img = document.createElement('img');
img.src = "bird1.png";
document.getElementById('dv').appendChild(img);
};
document.getElementById('btnText').onclick = function () {
var input = document.createElement('input');
input.type = 'text';
document.getElementById('dv').appendChild(input);
};
document.getElementById('btnLink').onclick = function () {
var a = document.createElement('a');
a.innerText = '163';
a.href = 'http://www.163.com';
document.getElementById('dv').appendChild(a);
};
document.getElementById('btnDel').onclick = function () {
var nodes = document.getElementById('dv').childNodes;
while (nodes.length>0) {
document.getElementById('dv').removeChild(nodes[0]);
nodes = document.getElementById('dv').childNodes;
}
}
}
</script>
</head>
<body>
<input type="button" name="name" value="图片" id="btnImage" />
<input type="button" name="name" value="文本框" id="btnText" />
<input type="button" name="name" value="超链接" id="btnLink" />
<input type="button" name="name" value="删除" id="btnDel" />
<div id="dv">
</div>
</body>
</html>
js 动态操作元素的更多相关文章
- 无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)
动态脚本元素即在js中去创建<script>标签加载外部js并执行,这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程.通过下面两个例子对比出效果 <!DOCTYPE htm ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- 使用JS动态操作css的集中方法
内联样式 在咱们深入一些复杂的知识之前,先回来顾一下一些基础知识.例如,咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式. const el = document.cr ...
- Js动态操作表格
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- JS动态创建元素
动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...
- js动态操作DOM
创建一个元素 createElement() 向元素末尾添加一个子节点 appendChild() 将新的元素插入到指定元素的前面 insertBefore(new,old); 删除一个子节点 rem ...
- js动态操作订单表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery动态操作元素
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
随机推荐
- JS和CSS压缩部署，提高访问效率
一直想把项目中的js和css压缩下,今天终于搞定了. 先说说几个注意的问题,目标影响着你对应的解决办法:1.压缩后的文件,是否要直接覆盖旧的文件2. 单个压缩文件重命名,还是整个目录换个名字,同时文件 ...
- 开源 免费 java CMS - FreeCMS1.9 会员管理
项目地址:http://www.freeteam.cn/ 会员管理 1. 会员管理 从左側管理菜单点击会员管理进入. 2. 加入会员 在会员列表下方点击"加入"button. 填写 ...
- 【codeforces 768A】Oath of the Night's Watch
[题目链接]:http://codeforces.com/contest/768/problem/A [题意] 让你统计这样的数字x的个数; x要满足有严格比它小和严格比它大的数字; [题解] 排个序 ...
- erlang OTP gen_server 图解分析
http://www.hoterran.info/otp-gen_server-sourcecode 在阅读erlang的otp源码gen_server.erl的时候,一直想写点什么,用一种最好的方式 ...
- 【BZOJ 1037】[ZJOI2008]生日聚会Party
[题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1037 [题意] [题解] /* 设f[i][j][k][l] 表示前i个人中,有j个男 ...
- 排序 —— 希尔排序（Shell sort）
希尔排序(Shell sort)的名称源于它的发明者 Donald Shell,该算法是冲破二次时间屏障(冒泡和插入排序,基于相邻元素的交换)的第一批算法.希尔排序改进了冒泡和插入排序的相邻元素才进行 ...
- 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序
微信小程序唤起其他微信小程序 / 移动应用App唤起小程序 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单 先上链接 小程序跳转小程序 Navigator组件 推荐使用 小程序跳转小程序 ...
- 微信小程序预览图片
选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...
- Cordova 代码热更新 - 简书
原文:Cordova 代码热更新 - 简书 Cordova 代码热更新 [图片上传失败...(image-a19be7-1521624289049)] 基于 Cordova 框架能将网页应用 (js, ...
- No USB devices or running emulators detected”
每次重装系统之后,安装andorid studio后,使用真机调试代码,就会出现"No USB devices or running emulators detected"的错误, ...