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 相关文章推荐
模仿百度三维地图的js数据分享
May 12 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
简单谈谈javascript高级特性
Sep 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
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python书籍信息爬虫实例
2018/03/19 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python十进制转二进制的详解
2020/02/07 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python 解决函数返回return的问题
2020/12/05 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
局域网标准
2016/09/10 面试题
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
如何安装ruby on rails
2014/02/09 面试题
后勤工作个人总结
2015/02/28 职场文书
品德与社会教学反思
2016/02/24 职场文书
导游词之凤凰古城
2019/10/22 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
Nginx安装配置详解
2022/06/25 Servers