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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JavaScript 继承使用分析
2011/05/12 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python调用支付宝支付接口流程
2019/08/15 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
物流管理应届生求职信
2013/11/07 职场文书
大学毕业生推荐信
2014/07/09 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书