js实现html节点、CSS样式、事件的动态添加以及html覆盖层的增添

js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加

（一）js实现html节点、CSS样式、事件的动态添加

   ①场景描述：我们需要动态获取后台数据并将这些数据以列表方式展示，其中列表存在自己的列表样式，每个item都存在自己的点击事件.....那么在这种情况下我们是不是就需要用到动态添加节点的模式去处理呢？

  ②代码记录如下：

$.ajax({
						url : "***.action",
						type : 'post',
						dataType : 'json',
						contentType : "application/x-www-form-urlencoded; charset=utf-8",
						data : {
							'name' : name,
							'type' : type
						},
						success : function(data) {
							$("#lianxiang").empty();
							var mydiv = document.getElementById("lianxiang");
							var arr = new Array();
							arr = data;
							if(arr.length==0){
								document.getElementById('lianxiang').innerHTML='  未找到相关站点或线路';
							}
							if (arr.length > 0) {
								for ( var j = 0; j < arr.length; j++) {

								var arr_l = new Array();
								arr_1 = arr[j];

								var divone = document.createElement("div");
								if(j%2==0){
								divone.setAttribute("class","ui-block-a");
								}else{
									divone.setAttribute("class","ui-block-b");	
								}				
								var divtwo = document.createElement("div");
								divtwo.setAttribute("class","bus_zp_list_more_01");
								var aa = document.createElement("a");
								aa.setAttribute("href","#");
								var span = document.createElement("span");								
								span.innerHTML = arr_1[2];
								divtwo.id = j;
								aa.appendChild(span);
								divtwo.appendChild(aa);
								divone.appendChild(divtwo);
								mydiv.appendChild(divone);
								divtwo.onclick = function() {
									var idnum = $(this).attr('id');
									ewohobustwo(data[idnum][0], data[idnum][1],
											data[idnum][2], data[idnum][3]);
							
								};
								}
							} 
						},
						error : function() {

							alert("网络忙，请再次尝试哦!");
						}
					});

其中首先找到父节点mydiv ，然后采用 var divone = document.createElement("div")的方式创建新的节点（这里可以使div、span、a等各种），同样可以对新创建的节点添加新的css、点击事件、id等，最后将这些新的节点元素一点点添加到父级元素即可完成动态元素的创建添加；

（二）html覆盖层的添加

①需要在页面引入一下html

//	<div class="DialogDiv" style="display: none;">
//		<div class="U-guodu-box">
//			<div>
//				<table width="100%" cellpadding="0" cellspacing="0" border="0">
//					<tr>
//						<td align="center"><img src="images/loading.gif">
//						</td>
//					</tr>
//					<tr>
//						<td valign="middle" align="center" style="text-shadow: 0 0 0">进行中，请稍后...</td>
//					</tr>
//				</table>
//			</div>
//		</div>
//	</div>

②加入对应的lodeing的css

#BgDiv1{background-color:#000; position:absolute; z-index:9999;  display:none;left:0px; top:0px; width:100%; height:100%;opacity: 0.6; filter: alpha(opacity=60);}
.DialogDiv{position:absolute;z-index:99999;}
.U-user-login-btn{ display:block; border:none; background:url(images/bg_mb_btn1_1.png) repeat-x; font-size:1em; color:#efefef; line-height:49px; cursor:pointer; height:53px; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;}
 .U-user-login-btn:hover, .U-user-login-btn:active{ display:block; border:none; background:url(images/bg_mb_btn1_1_h.png) repeat-x; font-size:1em; color:#efefef; line-height:49px; cursor:pointer; height:53px; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;}
.U-user-login-btn2{ display:block; border:none;background:url(images/bg_mb_btn1_1_h.png) repeat-x;   font-size:1em; color:#efefef; line-height:49px; cursor:pointer; font-weight:bold;
border-radius:3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #cbcacf ;height:53px;}
.U-guodu-box { padding:5px 15px;  background:#3c3c3f; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;  min-heigh:200px; border-radius:10px;}
.U-guodu-box div{ color:#fff; line-height:20px; font-size:12px; margin:0px auto; height:100%; padding-top:10%; padding-bottom:10%;}

③下面两个js方法实现了对覆盖层的展示和隐藏

	function showlode() {
		$("#BgDiv1").css({
			display : "block",
			height : $(document).height()
		});
		var yscroll = document.documentElement.scrollTop;
		var screenx = $(window).width();
		var screeny = $(window).height();
		$(".DialogDiv").css("display", "block");
		$(".DialogDiv").css("top", yscroll + "px");
		var DialogDiv_width = $(".DialogDiv").width();
		var DialogDiv_height = $(".DialogDiv").height();
		$(".DialogDiv").css("left", (screenx / 2 - DialogDiv_width / 2) + "px");
		$(".DialogDiv").css("top", (screeny / 2 - DialogDiv_height / 2) + "px");
		$("body").css("overflow", "hidden");
		
	}

	function hidelode() {
		$("#BgDiv1").css({
			display : "none",
			height : $(document).height()
		});
		var yscroll = document.documentElement.scrollTop;
		var screenx = $(window).width();
		var screeny = $(window).height();
		$(".DialogDiv").css("display", "none");
		$(".DialogDiv").css("top", yscroll + "px");
		var DialogDiv_width = $(".DialogDiv").width();
		var DialogDiv_height = $(".DialogDiv").height();
		$(".DialogDiv").css("left", (screenx / 2 - DialogDiv_width / 2) + "px");
		$(".DialogDiv").css("top", (screeny / 2 - DialogDiv_height / 2) + "px");
		$("body").css("overflow", "hidden");
	}

以上基本记录了js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加，方便自己查阅！