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>

View Code

二、动态添加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>

View Code

三、动态添加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>

View Code

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

View Code

相关阅读:
016 vue的组件通信
 015 vue组件中的数据
 014 vue的组件化开发
 013 vue的js中的高阶函数
 012 vue的v-model的使用
 011 vue的购书案例
 010 vue的过滤器的使用
 CF1519F
CF1519E
CF1517F
原文地址：https://www.cnblogs.com/lanye/p/3359087.html