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 页面坐标相关知识整理
Jan 09 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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字符串过滤与替换小结
2015/01/26 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python微信好友数据分析详解
2018/11/19 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
pytorch打印网络结构的实例
2019/08/19 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
介绍下WebSphere的安全性
2013/01/31 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
自荐信格式模板
2015/03/27 职场文书
考勤制度通知
2015/04/25 职场文书