利用JavaScript动态添加Div的方式有很多，在这次开发中有用到，就搜集了一下比较常用的。

一、在一个Div前添加Div

  1. <html>
  2.   <body>
  3.   <div   id="a">
  4.    <div   id="a1">1</div>
  5.    <div   id="a2">2</div>
  6.   </div>
  7.         <a href="javascript:addDiv();">test</a>
  8.   </body>
  9. <script   type="text/javascript">
  10.  function addDiv(){
  11.         var   newNode=document.createElement("div");
  12.         newNode.setAttribute("id","a3");
  13.         var   txtNode=document.createTextNode("3");
  14.         newNode.appendChild(txtNode);   
  15.  
  16.         document.getElementById("a").insertBefore(newNode,document.getElementById("a2"));   
  17.  
  18.         alert(document.getElementById("a").innerHTML)
  19. }
  20.  </script>
  21. </html>

二、动态添加Div，并在Div上添加事件

  1. <html>
  2.  <body>
  3.    <a href="javascript:aa();">text</a>
  4.  </body>
  5. </html>
  6. <script language=javascript>
  7.         var divId=1;
  8.         //动态生成单纯的div
  9.         function CreateOuterDiv()
  10.         {
  11.             var obj=document.createElement("div");
  12.             obj.id="myDiv"+divId;
  13.             divId++;
  14.             obj.style.border="1px solid #000000";
  15.             obj.style.height="30px";
  16.             obj.style.width="200px";
  17.             obj.style.filter="alpha(opacity=70)";
  18.             obj.style.margin="10px";
  19.             obj.style.cursor="hand";
  20.             obj.algin="center";
  21.             //obj.innerHTML="<a href='#"+obj.id+"'>ssssssssss</a>";
  22.             obj.innerText="sssssss";
  23.  
  24.             document.body.appendChild(obj);
  25.             document.getElementById(obj.id).onclick=function(){aa();};
  26.         }
  27.         function aa()
  28.         {
  29.             CreateOuterDiv();//alert();
  30.         }
  31. </script>

三、动态添加Div，并删除某个Div

  1.  <html xmlns="http://www.w3.org/1999/xhtml">
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.  <title>无标题文档</title>
  5.  </head>
  6.      <script type="text/javascript">
  7.      var a=0;
  8.      function add(){
  9.          var o=document.getElementById("PhotoLabel");
  10.          var div=document.createElement("div");
  11.          div.id = div.name = "d"+ a;
  12.          div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);
  13.          document.getElementById("addPhotoLabel").appendChild(div);
  14.          //document.write(document.getElementById("addPhotoLabel").innerHTML);
  15.          alert(document.getElementById("addPhotoLabel").innerHTML);
  16.          a++;
  17.      }
  18.      //window.onload =  function(){add();}
  19.      function deleteDiv(){
  20.       var oDiv= document.getElementById("d2");
  21.        document.getElementById("addPhotoLabel").removeChild(oDiv);
  22.      }
  23.      </script>
  24.  <body>
  25.  <div id="PhotoLabel">
  26.  safasfdgdag
  27.  <a>aasscc</a>
  28.  </div>
  29.  <div id="addPhotoLabel"></div>
  30.  <a href="javascript:add();"><span style="font-size: 15px">增加</span></a>
  31.  <a href="javascript:deleteDiv();"><span style="font-size: 15px">删除第二个</span></a>
  32.  </body>
  33.  </html>

四、弹出div

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.  <title>JavaScript 仿LightBox内容显示效果</title>
  6.  </head>
  7.  
  8.  <body>
  9.  
  10.  <br /><br /><br /><br />
  11.  
  12.  <script>
  13.  
  14.  var isIE = (document.all) ? true : false;
  15.  
  16.  var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
  17.  
  18.  var $ = function (id) {
  19.      return "string" == typeof id ? document.getElementById(id) : id;
  20.  };
  21.  
  22.  var Class = {
  23.      create: function() {
  24.          return function() { this.initialize.apply(this, arguments); }
  25.      }
  26.  }
  27.  
  28.  var Extend = function(destination, source) {
  29.      for (var property in source) {
  30.          destination[property] = source[property];
  31.      }
  32.  }
  33.  
  34.  var Bind = function(object, fun) {
  35.      return function() {
  36.          return fun.apply(object, arguments);
  37.      }
  38.  }
  39.  
  40.  var Each = function(list, fun){
  41.      for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
  42.  };
  43.  
  44.  var Contains = function(a, b){
  45.      return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
  46.  }
  47.  
  48.  var OverLay = Class.create();
  49.  OverLay.prototype = {
  50.    initialize: function(options) {
  51.  
  52.      this.SetOptions(options);
  53.  
  54.      this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
  55.  
  56.      this.Color = this.options.Color;
  57.      this.Opacity = parseInt(this.options.Opacity);
  58.      this.zIndex = parseInt(this.options.zIndex);
  59.  
  60.      with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; }
  61.  
  62.      if(isIE6){
  63.          this.Lay.style.position = "absolute";
  64.          //ie6设置覆盖层大小程序
  65.          this._resize = Bind(this, function(){
  66.              this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
  67.              this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
  68.          });
  69.          //遮盖select
  70.          this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'
  71.      }
  72.    },
  73.    //设置默认属性
  74.    SetOptions: function(options) {
  75.      this.options = {//默认值
  76.          Lay:        null,//覆盖层对象
  77.          Color:        "#fff",//背景色
  78.          Opacity:    50,//透明度(0-100)
  79.          zIndex:        1000//层叠顺序
  80.      };
  81.      Extend(this.options, options || {});
  82.    },
  83.    //显示
  84.    Show: function() {
  85.      //兼容ie6
  86.      if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); }
  87.      //设置样式
  88.      with(this.Lay.style){
  89.          //设置透明度
  90.          isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;
  91.          backgroundColor = this.Color; display = "block";
  92.      }
  93.    },
  94.    //关闭
  95.    Close: function() {
  96.      this.Lay.style.display = "none";
  97.      if(isIE6){ window.detachEvent("onresize", this._resize); }
  98.    }
  99.  };
  100.  
  101.  var LightBox = Class.create();
  102.  LightBox.prototype = {
  103.    initialize: function(box, options) {
  104.  
  105.      this.Box = $(box);//显示层
  106.  
  107.      this.OverLay = new OverLay(options);//覆盖层
  108.  
  109.      this.SetOptions(options);
  110.  
  111.      this.Fixed = !!this.options.Fixed;
  112.      this.Over = !!this.options.Over;
  113.      this.Center = !!this.options.Center;
  114.      this.onShow = this.options.onShow;
  115.  
  116.      this.Box.style.zIndex = this.OverLay.zIndex + 1;
  117.      this.Box.style.display = "none";
  118.  
  119.      //兼容ie6用的属性
  120.      if(isIE6){
  121.          this._top = this._left = 0; this._select = [];
  122.          this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });
  123.      }
  124.    },
  125.    //设置默认属性
  126.    SetOptions: function(options) {
  127.      this.options = {//默认值
  128.          Over:    true,//是否显示覆盖层
  129.          Fixed:    false,//是否固定定位
  130.          Center:    false,//是否居中
  131.          onShow:    function(){}//显示时执行
  132.      };
  133.      Extend(this.options, options || {});
  134.    },
  135.    //兼容ie6的固定定位程序
  136.    SetFixed: function(){
  137.      this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px";
  138.      this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";
  139.  
  140.      this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
  141.    },
  142.    //兼容ie6的居中定位程序
  143.    SetCenter: function(){
  144.      this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";
  145.      this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";
  146.    },
  147.    //显示
  148.    Show: function(options) {
  149.      //固定定位
  150.      this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute";
  151.  
  152.      //覆盖层
  153.      this.Over && this.OverLay.Show();
  154.  
  155.      this.Box.style.display = "block";
  156.  
  157.      //居中
  158.      if(this.Center){
  159.          this.Box.style.top = this.Box.style.left = "50%";
  160.          //设置margin
  161.          if(this.Fixed){
  162.              this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
  163.              this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
  164.          }else{
  165.              this.SetCenter();
  166.          }
  167.      }
  168.  
  169.      //兼容ie6
  170.      if(isIE6){
  171.          if(!this.Over){
  172.              //没有覆盖层ie6需要把不在Box上的select隐藏
  173.              this._select.length = 0;
  174.              Each(document.getElementsByTagName("select"), Bind(this, function(o){
  175.                  if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); }
  176.              }))
  177.          }
  178.          //设置显示位置
  179.          this.Center ? this.SetCenter() : this.Fixed && this.SetFixed();
  180.          //设置定位
  181.          this.Fixed && window.attachEvent("onscroll", this._fixed);
  182.      }
  183.  
  184.      this.onShow();
  185.    },
  186.    //关闭
  187.    Close: function() {
  188.      this.Box.style.display = "none";
  189.      this.OverLay.Close();
  190.      if(isIE6){
  191.          window.detachEvent("onscroll", this._fixed);
  192.          Each(this._select, function(o){ o.style.visibility = "visible"; });
  193.      }
  194.    }
  195.  };
  196.  
  197.  </script>
  198.  
  199.  <style>
  200.  .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}
  201.  .lightbox dt{background:#f4f4f4; padding:5px;}
  202.  </style>
  203.  
  204.  <dl id="idBox" class="lightbox">
  205.    <dt id="idBoxHead"><b>LightBox</b> </dt>
  206.    <dd>
  207.      内容显示
  208.      <br /><br />
  209.      <input name="" type="button" value=" 关闭 " id="idBoxCancel" />
  210.      <br /><br />
  211.    </dd>
  212.  </dl>
  213.  
  214.  <div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;">
  215.  
  216.  <input type="button" value="关闭覆盖层" id="btnOverlay" />
  217.  <input type="button" value="黑色覆盖层" id="btnOverColor" />
  218.  <input type="button" value="全透覆盖层" id="btnOverOpacity" />
  219.  <input type="button" value="定位效果" id="btnFixed" />
  220.  <input type="button" value="居中效果" id="btnCenter" />
  221.  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  222.  <select>
  223.  <option>覆盖select测试</option>
  224.  </select>
  225.  <input name="" type="button" value=" 打开 " id="idBoxOpen" />
  226.  
  227.  </div>
  228.  
  229.  <script>
  230.  
  231.  var box = new LightBox("idBox");
  232.  
  233.  $("idBoxCancel").onclick = function(){ box.Close(); }
  234.  $("idBoxOpen").onclick = function(){ box.Show(); }
  235.  
  236.  $("btnOverlay").onclick = function(){
  237.      box.Close();
  238.      if(box.Over){
  239.          box.Over = false;
  240.          this.value = "打开覆盖层";
  241.      } else {
  242.          box.Over = true;
  243.          this.value = "关闭覆盖层";
  244.      }
  245.  }
  246.  
  247.  $("btnOverColor").onclick = function(){
  248.      box.Close();
  249.      box.Over = true;
  250.      if(box.OverLay.Color == "#fff"){
  251.          box.OverLay.Color = "#000";
  252.          this.value = "白色覆盖层";
  253.      } else {
  254.          box.OverLay.Color = "#fff"
  255.          this.value = "黑色覆盖层";
  256.      }
  257.  }
  258.  
  259.  $("btnOverOpacity").onclick = function(){
  260.      box.Close();
  261.      box.Over = true;
  262.      if(box.OverLay.Opacity == 0){
  263.          box.OverLay.Opacity = 50;
  264.          this.value = "全透覆盖层";
  265.      } else {
  266.          box.OverLay.Opacity = 0;
  267.          this.value = "半透覆盖层";
  268.      }
  269.  }
  270.  
  271.  $("btnFixed").onclick = function(){
  272.      box.Close();
  273.      if(box.Fixed){
  274.          box.Fixed = false;
  275.          this.value = "定位效果";
  276.      } else {
  277.          box.Fixed = true;
  278.          this.value = "取消定位";
  279.      }
  280.  }
  281.  
  282.  $("btnCenter").onclick = function(){
  283.      box.Close();
  284.      if(box.Center){
  285.          box.Center = false;
  286.          box.Box.style.left = box.Box.style.top = "20%";
  287.          box.Box.style.marginTop = box.Box.style.marginLeft = "0";
  288.          this.value = "居中效果";
  289.      } else {
  290.          box.Center = true;
  291.          this.value = "重新定位";
  292.      }
  293.  }
  294.  </script>
  295.  
  296.  </body>
  297.  </html>

js动态添加Div的更多相关文章

  1. JS动态添加div，然后在div中添加元素

    需求: 组织部中有个这样的需求,根据年份动态显示该年份下的定性指标! 我的做法: 先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 代码: 空的div,存放定性指标 <div ...

  2. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  3. 【原生js】js动态添加dom，如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  4. JavaScript 动态添加div 绑定点击事件

    1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...

  5. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  6. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  7. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  8. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

随机推荐

  1. poj2533--Longest Ordered Subsequence（dp：最长上升子序列）

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 33943   Acc ...

  2. 阿里云CentOS配置iptables防火墙[转]

    虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FORWORD都是ACCEPT的规则 一.检查iptabl ...

  3. 怎样安装配置tomcat 8

    链接地址:http://jingyan.baidu.com/article/ff42efa91132a0c19e220208.html Apache tomcat 是目前最为流行的java网站开发的服 ...

  4. Writing a ServiceMain Function（使用RegisterServiceCtrlHandler函数）

    The following global definitions are used in this sample. C++   #define SVCNAME TEXT("SvcName&q ...

  5. eclipse中使用maven插件的时候，运行run as maven build的时候报错

    -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a ...

  6. windows/linuxjdk安装，jdk1.6升级到1.7

    一.JDK: JAVA_HOME: C:\Program Files\Java\jdk1.7.0_79 PATH: ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin CLASS ...

  7. 王立平--eclipse向svnserver上传项目

    1.team-->share project watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2 ...

  8. fullcalendar日历控件知识点集合

    1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...

  9. MSSQL - SqlDataAdapter连接数据库提高性能用法

    SqlDataAdapter 与 SqlConnection 和 SqlCommand 一起使用,以便在连接到 SQL Server 数据库时提高性能. SqlDataAdapter 的这一实现自动打 ...

  10. 静态代码检查工具 cppcheck 的使用（可分别集成到VS和QT Creator里）

    CppCheck是一个C/C++代码缺陷静态检查工具.不同于C/C++编译器及其它分析工具,CppCheck只检查编译器检查不出来的bug,不检查语法错误.所谓静态代码检查就是使用一个工具检查我们写的 ...