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 相关文章推荐
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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和ACCESS写聊天室(七)
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP加密解密函数详解
2015/10/28 PHP
完美的php分页类
2017/10/24 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
食品安全工作方案
2014/05/07 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS