动态的创建一个元素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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
一文总结学习Python的14张思维导图
2017/10/17 Python
Python编程实现蚁群算法详解
2017/11/13 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python中map的基本用法示例
2018/09/10 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
在keras里实现自定义上采样层
2020/06/28 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
人民教师的自我评价分享
2014/02/21 职场文书
四下基层实施方案
2014/03/28 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
个人收入证明范本
2014/09/18 职场文书
公司仓库管理制度
2015/08/04 职场文书
如何在Python项目中引入日志
2021/05/31 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript