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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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语法(5)
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
临床医学大学生求职信
2013/09/28 职场文书
生物化工工艺专业应届生求职信
2013/10/08 职场文书
大学生先进事迹材料
2014/02/16 职场文书
经典商业广告词
2014/03/13 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2016公司年会主持词
2015/07/01 职场文书
Python3 类型标注支持操作
2021/06/02 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python