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重写alert方法的实例代码
Mar 29 Javascript
Jquery解析json数据详解
Dec 26 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
json的使用小结
Jun 08 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 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
长波有什么东西
2021/03/01 无线电
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP教程 基本语法
2009/10/23 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Django中使用group_by的方法
2015/05/26 Python
Python网络爬虫实例讲解
2016/04/28 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python绘制多个曲线的折线图
2020/03/23 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python基于socket函数实现端口扫描
2020/05/28 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
模具设计与制造专业求职信
2014/07/19 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
Moment的feature导致线上bug解决分析
2022/09/23 Javascript