Js allows you to dynamically add html nodes, CSS styles, events, and html overlay layers.

Js allows you to dynamically add html nodes, CSS styles, events, and html overlay layers.

(1) js enables dynamic addition of html nodes, CSS styles, and events

① Scenario Description: We need to dynamically obtain background data and display the data in a list. The list has its own list style, and each item has its own click event ..... in this case, do we need to use the dynamic node addition mode for processing?

② The Code record is as follows:

$. Ajax ({url :***. action, type: 'post', ype: '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 = 'no site or line';} 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 (Network busy, please try again !);}});

First find the parent node mydiv, and then use var divone = document. createElement (div) method to create a new node (which can be div, span, a, etc ), you can also add new css, click events, and IDs to newly created nodes. Then, add these new node elements to the parent element to create and add dynamic elements;

(2) Add html overlay Layer

 

① Introduce html on the page

 

//

////////////////////

//

In progress. Please wait...

//////
② Add the corresponding 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%;}

③ The following two js methods demonstrate and hide the overwriting layer.

 

 

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

The above basically records how to dynamically add html nodes, CSS styles, events, and html overlay layers in js for your convenience!