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("网络忙，请再次尝试哦!");
						}
					});

①需要在页面引入一下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>

#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%;}

	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");
	}