js动态添加Div

利用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>