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

一、在一个Div前添加Div

<html>

  <body>

  <div   id="a">

   <div   id="a1">1</div>

   <div   id="a2">2</div>

  </div>

        <a href="javascript:addDiv();">test</a>

  </body>

<script   type="text/javascript">

 function addDiv(){

        var   newNode=document.createElement("div");

        newNode.setAttribute("id","a3");

        var   txtNode=document.createTextNode("3");

        newNode.appendChild(txtNode);   

        document.getElementById("a").insertBefore(newNode,document.getElementById("a2"));   

        alert(document.getElementById("a").innerHTML)

}

 </script>

</html>

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

<html>

 <body>

   <a href="javascript:aa();">text</a>

 </body>

</html>

<script language=javascript>

        var divId=1;

        //动态生成单纯的div

        function CreateOuterDiv()

        {

            var obj=document.createElement("div");

            obj.id="myDiv"+divId;

            divId++;

            obj.style.border="1px solid #000000";

            obj.style.height="30px";

            obj.style.width="200px";

            obj.style.filter="alpha(opacity=70)";

            obj.style.margin="10px";

            obj.style.cursor="hand";

            obj.algin="center";

            //obj.innerHTML="<a href='#"+obj.id+"'>ssssssssss</a>";

            obj.innerText="sssssss";

            document.body.appendChild(obj);

            document.getElementById(obj.id).onclick=function(){aa();};

        }

        function aa()

        {

            CreateOuterDiv();//alert();

        }

</script>

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>无标题文档</title>

 </head>

     <script type="text/javascript">

     var a=0;

     function add(){

         var o=document.getElementById("PhotoLabel");

         var div=document.createElement("div");

         div.id = div.name = "d"+ a;

         div.innerHTML=o.innerHTML.replace(/\{0\}/ig,a);

         document.getElementById("addPhotoLabel").appendChild(div);

         //document.write(document.getElementById("addPhotoLabel").innerHTML);

         alert(document.getElementById("addPhotoLabel").innerHTML);

         a++;

     }

     //window.onload =  function(){add();}

     function deleteDiv(){

      var oDiv= document.getElementById("d2");

       document.getElementById("addPhotoLabel").removeChild(oDiv);

     }

     </script>

 <body>

 <div id="PhotoLabel">

 safasfdgdag

 <a>aasscc</a>

 </div>

 <div id="addPhotoLabel"></div>

 <a href="javascript:add();"><span style="font-size: 15px">增加</span></a>

 <a href="javascript:deleteDiv();"><span style="font-size: 15px">删除第二个</span></a>

 </body>

 </html>

四、弹出div

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>JavaScript 仿LightBox内容显示效果</title>

 </head>

 <body>

 <br /><br /><br /><br />

 <script>

 var isIE = (document.all) ? true : false;

 var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);

 var $ = function (id) {

     return "string" == typeof id ? document.getElementById(id) : id;

 };

 var Class = {

     create: function() {

         return function() { this.initialize.apply(this, arguments); }

     }

 }

 var Extend = function(destination, source) {

     for (var property in source) {

         destination[property] = source[property];

     }

 }

 var Bind = function(object, fun) {

     return function() {

         return fun.apply(object, arguments);

     }

 }

 var Each = function(list, fun){

     for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }

 };

 var Contains = function(a, b){

     return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);

 }

 var OverLay = Class.create();

 OverLay.prototype = {

   initialize: function(options) {

     this.SetOptions(options);

     this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);

     this.Color = this.options.Color;

     this.Opacity = parseInt(this.options.Opacity);

     this.zIndex = parseInt(this.options.zIndex);

     with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; }

     if(isIE6){

         this.Lay.style.position = "absolute";

         //ie6设置覆盖层大小程序

         this._resize = Bind(this, function(){

             this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";

             this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";

         });

         //遮盖select

         this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'

     }

   },

   //设置默认属性

   SetOptions: function(options) {

     this.options = {//默认值

         Lay:        null,//覆盖层对象

         Color:        "#fff",//背景色

         Opacity:    50,//透明度(0-100)

         zIndex:        1000//层叠顺序

     };

     Extend(this.options, options || {});

   },

   //显示

   Show: function() {

     //兼容ie6

     if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); }

     //设置样式

     with(this.Lay.style){

         //设置透明度

         isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;

         backgroundColor = this.Color; display = "block";

     }

   },

   //关闭

   Close: function() {

     this.Lay.style.display = "none";

     if(isIE6){ window.detachEvent("onresize", this._resize); }

   }

 };

 var LightBox = Class.create();

 LightBox.prototype = {

   initialize: function(box, options) {

     this.Box = $(box);//显示层

     this.OverLay = new OverLay(options);//覆盖层

     this.SetOptions(options);

     this.Fixed = !!this.options.Fixed;

     this.Over = !!this.options.Over;

     this.Center = !!this.options.Center;

     this.onShow = this.options.onShow;

     this.Box.style.zIndex = this.OverLay.zIndex + 1;

     this.Box.style.display = "none";

     //兼容ie6用的属性

     if(isIE6){

         this._top = this._left = 0; this._select = [];

         this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });

     }

   },

   //设置默认属性

   SetOptions: function(options) {

     this.options = {//默认值

         Over:    true,//是否显示覆盖层

         Fixed:    false,//是否固定定位

         Center:    false,//是否居中

         onShow:    function(){}//显示时执行

     };

     Extend(this.options, options || {});

   },

   //兼容ie6的固定定位程序

   SetFixed: function(){

     this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px";

     this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";

     this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;

   },

   //兼容ie6的居中定位程序

   SetCenter: function(){

     this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";

     this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";

   },

   //显示

   Show: function(options) {

     //固定定位

     this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute";

     //覆盖层

     this.Over && this.OverLay.Show();

     this.Box.style.display = "block";

     //居中

     if(this.Center){

         this.Box.style.top = this.Box.style.left = "50%";

         //设置margin

         if(this.Fixed){

             this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";

             this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";

         }else{

             this.SetCenter();

         }

     }

     //兼容ie6

     if(isIE6){

         if(!this.Over){

             //没有覆盖层ie6需要把不在Box上的select隐藏

             this._select.length = 0;

             Each(document.getElementsByTagName("select"), Bind(this, function(o){

                 if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); }

             }))

         }

         //设置显示位置

         this.Center ? this.SetCenter() : this.Fixed && this.SetFixed();

         //设置定位

         this.Fixed && window.attachEvent("onscroll", this._fixed);

     }

     this.onShow();

   },

   //关闭

   Close: function() {

     this.Box.style.display = "none";

     this.OverLay.Close();

     if(isIE6){

         window.detachEvent("onscroll", this._fixed);

         Each(this._select, function(o){ o.style.visibility = "visible"; });

     }

   }

 };

 </script>

 <style>

 .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}

 .lightbox dt{background:#f4f4f4; padding:5px;}

 </style>

 <dl id="idBox" class="lightbox">

   <dt id="idBoxHead"><b>LightBox</b> </dt>

   <dd>

     内容显示

     <br /><br />

     <input name="" type="button" value=" 关闭 " id="idBoxCancel" />

     <br /><br />

   </dd>

 </dl>

 <div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;">

 <input type="button" value="关闭覆盖层" id="btnOverlay" />

 <input type="button" value="黑色覆盖层" id="btnOverColor" />

 <input type="button" value="全透覆盖层" id="btnOverOpacity" />

 <input type="button" value="定位效果" id="btnFixed" />

 <input type="button" value="居中效果" id="btnCenter" />

 <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 />

 <select>

 <option>覆盖select测试</option>

 </select>

 <input name="" type="button" value=" 打开 " id="idBoxOpen" />

 </div>

 <script>

 var box = new LightBox("idBox");

 $("idBoxCancel").onclick = function(){ box.Close(); }

 $("idBoxOpen").onclick = function(){ box.Show(); }

 $("btnOverlay").onclick = function(){

     box.Close();

     if(box.Over){

         box.Over = false;

         this.value = "打开覆盖层";

     } else {

         box.Over = true;

         this.value = "关闭覆盖层";

     }

 }

 $("btnOverColor").onclick = function(){

     box.Close();

     box.Over = true;

     if(box.OverLay.Color == "#fff"){

         box.OverLay.Color = "#000";

         this.value = "白色覆盖层";

     } else {

         box.OverLay.Color = "#fff"

         this.value = "黑色覆盖层";

     }

 }

 $("btnOverOpacity").onclick = function(){

     box.Close();

     box.Over = true;

     if(box.OverLay.Opacity == 0){

         box.OverLay.Opacity = 50;

         this.value = "全透覆盖层";

     } else {

         box.OverLay.Opacity = 0;

         this.value = "半透覆盖层";

     }

 }

 $("btnFixed").onclick = function(){

     box.Close();

     if(box.Fixed){

         box.Fixed = false;

         this.value = "定位效果";

     } else {

         box.Fixed = true;

         this.value = "取消定位";

     }

 }

 $("btnCenter").onclick = function(){

     box.Close();

     if(box.Center){

         box.Center = false;

         box.Box.style.left = box.Box.style.top = "20%";

         box.Box.style.marginTop = box.Box.style.marginLeft = "0";

         this.value = "居中效果";

     } else {

         box.Center = true;

         this.value = "重新定位";

     }

 }

 </script>

 </body>

 </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. 【Cocos2d-x】截图分享功能

    Cocos2d-x截图实现 图片将会保存在data/data/包名/files文件夹下. Android下分享一张图片 linux系统下的文件权限 普通情况下android下的每个应用程序都是一个独立 ...

  2. JNI 详细解释

    JNI事实上,Java Native Interface缩写,那是,java本地接口.它提供了许多API实现和Java和其它语言的通信(主要是C&C++). 或许不少人认为Java已经足够强大 ...

  3. Android中Drawable分类汇总（上）

    Android把可绘制的对象抽象为Drawable,不同的图形图像资源就代表着不同的drawable类型.Android FrameWork提供了一些具体的Drawable实现,通常在代码中都不会直接 ...

  4. PHP - 操作MySQL数据库

    第16章 PHP操作MySQL 学习要点: 1.PHP连接到MySQL 2.增删改查 3.其他常用函数 如果你已经具有了使用PHP.SQL和MySQL的丰富经验,现在就可以把所有这些技术组合在一起.P ...

  5. Java基础06 组合

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经尝试去定义类.定义类,就是新建了一种类型(type).有了类,我们接着构造 ...

  6. 关于 iOS 基础动画

    1,首先,在iOS中,动画有2种,一种是对 UIView 做动画处理,另一种是对 CALayer做动画. 这里我们先要搞清楚 UIView 与 CALayer 之间的关系,UIView 是界面的基础元 ...

  7. JQuery5.04获取

    获取body:  $('body'); 或者 $(document.body); 获取元素标签:$('div');   $('a'); 获取ID: $('id'); 获取某个元素的某个属性: $('a ...

  8. hdu 1421 搬寝室 （dp）

    思路分析: dp[i][j] 表示选取到第 i 个   组成了 j 对的最优答案. 当然排序之后 选取相邻两个是更优的. if(i==j*2) dp[i][j] = dp[i-2][j-1] + w[ ...

  9. oncreate 测量尺寸

    在android中,在oncreate里面只是将布局信息设置好,并没有进行布局,因此是没法进行测量view或者屏幕的长高,可以通过下面的observer来观察,当view布局完成之后会回调下面的两个接 ...

  10. javascript 中 undefined 和 null 区别

    1.相同点 如果我们直接用 undefined == null  比较他们是相等的返回的将是 true. 2.区别 当我们用undefined === null 比较的时候最后返回的将是 false. ...