动态的创建一个元素createElement及删除一个元素


Posted in Javascript onJanuary 24, 2014
<html> 
<script language = "javascript" type = "text/javascript"> 
function test(){ 
//创建元素 
var myElement = document.createElement("a");//a是想创建的html元素标签名 
//给创建的元素添加必要的信息 
myElement.href = "http://www.baidu.com"; 
myElement.innerText = "连接到百度"; 
myElement.id = "id1"; 
//myElement.style.top = "300px"; 
//myElement.style.left = "500px"; 
//myElement.style.position = "absolute"; 
//把创建的元素添加到body 对象上 
//document.body.appendChild(myElement); 
//将元素添加到div 
document.getElementById("div1").appendChild(myElement); 
} 
function test2(){ 
//删除一个元素 
//也可以通过属性获得新增元素的父元素 
//document.getElementById("id1").parentNode 
document.getElementById("div1").removeChild(document.getElementById("id1")); 
} 
</script> 
<body> 
<input type = "button" onclick = "test()" value = "动态的创建一个超链接"/> 
<input type = "button" onclick = "test2()" value = "动态的删除添加的元素"/> 
<div id = "div1" style = "width:200px;height:300px;border:1px solid red"> 
div1 
</div> 
</body> 
</html>

动态的创建一个元素createElement及删除一个元素
Javascript 相关文章推荐
通过JavaScript控制字体大小的代码
Oct 04 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 #Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 #Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 #Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 #Javascript
js关于字符长度限制的问题示例探讨
Jan 24 #Javascript
JS方法调用括号的问题探讨
Jan 24 #Javascript
Array栈方法和队列方法的特点说明
Jan 24 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
php模板中出现空行解决方法
2011/03/08 PHP
php旋转图片90度的方法
2013/11/07 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php写app用的框架整理
2019/09/29 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
围观tangram js库
2010/12/28 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JSON格式化输出
2014/11/10 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python 自动补全(vim)
2014/11/30 Python
Python中集合类型(set)学习小结
2015/01/28 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
本科生的职业生涯规划范文
2014/01/09 职场文书
小学毕业感言500字
2014/02/28 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS