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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python实现超市商品销售管理系统
2019/11/22 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
中学教师暑期培训方案
2014/08/27 职场文书
社区义诊通知
2015/04/24 职场文书
小学体育教学随笔
2015/08/14 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery