js动态创建及移除div的方法


Posted in Javascript onJune 03, 2015

本文实例讲述了js动态创建及移除div的方法。分享给大家供大家参考。具体实现方法如下:

//创建div
function createDiv(){
 if(document.getElementByIdx_x("newD")!=null)
  document.body.removeChild(document.getElementByIdx_x("newD"));
 var Div = document.create_rElement("div");//创建div
 Div.setAttribute("id", "newD");
 Div.style.position = "absolute";
 Div.style.height = "160px";
 Div.style.width = "400px";
 Div.style.border = "1px solid grey";
 Div.style.background = "white";
 Div.style.paddingTop = "40px";
 Div.style.zIndex = "100";
 Div.style.left = 100 +"px";//注意Firefox下必须加"px"
 Div.style.top = 100 +"px";
 Div.style.textAlign = "center";
 Div.style.fontSize = "18px";
 var str = "<div id=\"divClose\" onclick=\"removeDiv()\" style=\"width:16px;height:16px;float:right;margin-top:-40px;background:url(images/divClose.gif);\"><\/div>";
 Div.innerHTML = str + title;
 document.body.appendChild(newD);
}
//移除创建的div
function removeDiv(){
 document.body.removeChild(document.getElementByIdx_x_x("newD"));
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 #Javascript
利用js实现禁止复制文本信息
Jun 03 #Javascript
详解JavaScript中循环控制语句的用法
Jun 03 #Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 #Javascript
JavaScript中for循环的使用详解
Jun 03 #Javascript
详解JavaScript的while循环的使用
Jun 03 #Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 #Javascript
You might like
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
scrapy头部修改的方法详解
2020/12/06 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
幼儿教师研修感言
2014/02/12 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js