JS implements HTML nodes, CSS styles, dynamic additions to events, and HTML overlay additions

(a) JS implementation of HTML nodes, CSS style, the dynamic addition of events

① Scenario Description: We need to dynamically retrieve the background data and display it in a list, where the list has its own list style, and each item has its own click event .... So in this case, do we need to use the dynamic Add node mode to deal with it?

The ② code is logged as follows:

$.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= ' did not find the relevant 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 = Docu Ment.createelement ("div"), if (j%2==0) {Divone.setattribute ("Class", "ui-block-a");} Else{divone.setattribute ("Class", "Ui-block-b");} var divtwo = document.createelement ("div");d ivtwo.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];d ivtwo.id = J;aa.appendchild (span);d ivtwo.appendchild (aa);d ivone.appendchild (divtwo); Mydiv.appendchild ( Divone);d Ivtwo.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 Oh!");});

It first finds the parent node mydiv, and then uses var Divone = document.createelement ("div") to create a new node (here you can make Div, span, a, etc.), as well as add new CSS to the newly created node, Click the event, ID, etc., and finally add a little bit of these new node elements to the parent element to complete the creation of dynamic elements;

(ii) HTML overlay Additions

① need to introduce HTML to the page

<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 ">//</td>//</tr>// <TR>//<TD valign= "Middle" align= "center" style= "text-shadow:0 0 0" > in progress, please later ... </td>//</tr>// </table>//</div>//</div>//</div>

② 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 to achieve the overlay of the display and hide

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 basic record JS implementation of HTML nodes, CSS style, dynamic addition of events and HTML overlay Add, easy to check!

JS implements HTML nodes, CSS styles, dynamic additions to events, and HTML overlay additions