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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
js 代码优化点滴记录
Feb 19 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
JavaScript中的Proxy对象
Nov 27 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 cli模式学习(PHP命令行模式)
2013/06/03 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php实现网站留言板功能
2015/11/04 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
JS实现留言板功能
2017/06/17 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
英文版餐饮业求职信
2013/10/18 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
python计算列表元素与乘积详情
2022/08/05 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS