动态的创建一个元素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 相关文章推荐
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
理解Javascript闭包
Nov 01 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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错误级别的设置方法
2013/06/17 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python解析xml文件操作实例
2014/10/05 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
优秀教师演讲稿
2014/05/06 职场文书
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers