动态的创建一个元素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入门学习书籍推荐
Jun 12 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
JSON格式化输出
2014/11/10 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
详解supervisor使用教程
2017/11/21 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Django返回HTML文件的实现方法
2020/09/17 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
如何进行Linux分区优化
2016/09/13 面试题
中职生自我鉴定范文
2013/10/03 职场文书
安全演讲稿大全
2014/05/09 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
先进班组材料范文
2014/12/25 职场文书
展览会邀请函
2015/02/02 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
学校学期工作总结
2015/08/13 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Django+Celery实现定时任务的示例
2021/06/23 Python