动态的创建一个元素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 TO HTML 转换
Jun 26 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
js中document.write的那点事
Dec 12 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
JavaScript oncopy事件用法实例解析
May 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python编写爬虫小程序
2015/05/14 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
最新pycharm安装教程
2020/11/18 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
介绍一下grep命令的使用
2012/06/28 面试题
蓝颜请假条
2014/04/11 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
大学教师个人总结
2015/02/10 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
详解CSS3浏览器兼容
2022/12/24 HTML / CSS