本文实例讲述了js动态创建及移除div的方法。分享给大家供大家参考。具体实现方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//创建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"));
}

js动态创建及移除div的方法的更多相关文章

  1. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  2. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  3. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  5. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  6. js 动态创建变量

      js 动态创建变量 CreationTime--2018年7月2日15点04分 Author:Marydon 1.实现方式 通过eval()实现 2.代码实现 /** * 声明一个函数 * @ex ...

  7. 通过js动态创建button

    通过js动态创建button 一.实例描述 通过JS的DOM对象,实现元素的动态创建. 二.效果 三.代码 <!DOCTYPE html> <html lang="zh-c ...

  8. js动态创建的select2标签样式加载不上解决办法

    js动态创建的select2标签样式加载不上:调用select2的select2()函数来初始化一下: js抛出了Uncaught query function not defined for Sel ...

  9. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

随机推荐

  1. C++对象的JSON序列化与反序列化探索完结-列表的序列化与反序列化

    在前两篇文章中,我们已经完成对普通对象以及复杂对象嵌套的序列化与反序列化,见如下地址: C++对象的JSON序列化与反序列化探索 C++对象的JSON序列化与反序列化探索续-复杂对象的序列化与反序列化 ...

  2. tomcat源码解读（1）–tomcat热部署实现原理

    tomcat的热部署实现原理:tomcat启动的时候会有启动一个线程每隔一段时间会去判断应用中加载的类是否发生变法(类总数的变化,类的修改),如果发生了变化就会把应用的启动的线程停止掉,清除引用,并且 ...

  3. Linux系统下安装rz/sz命令及使用说明(转载)

    对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...

  4. centos6.4下安装freetds使php支持mssql

    centos版本:6.4 php版本5.3.17 没有安装之前的情况:nginx+php+mysql+FPM-FCGI 接下来安装步骤如下: 1.打开http://www.freetds.org/,进 ...

  5. 設定 Bootstrap/SASS/Bower/gulp (Windows平台)

    請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...

  6. 在asp.net mvc中如何使用Grid++ Report (锐浪报表)

    在asp.net mvc中如何使用Grid++ Report (锐浪报表) 在cshtml,razor中的处理方法 以官方的asp.net(csharp)中的第一个示例"1a.简单表格&qu ...

  7. CentOS 下 Codeblocks 的 安装 + 汉化 以及 基本使用介绍

    Codeblocks 安装 注:在root用户下运行下列命令 1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可 yum install gcc yu ...

  8. install ruby and ruby gem

    sudo apt-get install ruby #find an folder and: git clone https://github.com/rubygems/rubygems.git cd ...

  9. easy ui 菜单和按钮(Menu and Button)

    http://www.zi-han.net/case/easyui/menu&button.html

  10. （转）火溶CEO王伟峰:Unity3D手机网游开发

    今天看到这篇文章,感觉很不错,尤其是那句“Unity3D的坑我觉得最严重的坑就是没有懂3D的程序员,把Unity当成Office用”. 转自http://blog.csdn.net/wwwang891 ...