动态的创建一个元素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里使用Dom操作Xml
Jan 22 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
详解js类型判断
May 22 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
手把手教你从零开始react+antd搭建项目
Jun 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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
javascript表单验证大全
2015/08/12 Javascript
前端性能优化及技巧
2016/05/06 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python对数据库操作
2016/03/28 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python Tornado框架的使用示例
2020/10/19 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
生产文员岗位职责
2014/04/05 职场文书
社会调查研究计划书
2014/05/01 职场文书
音乐节策划方案
2014/06/09 职场文书
终止劳动合同通知书
2015/04/16 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Nginx HTTP跳转至HTTPS
2022/05/15 Servers