Home > Developer > JavaScript
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <style>Div{width:300px;Height:400px;Border:2px Solid Pink; }Li{List-style-type:None;margin:0;padding:0;cursor:Pointer; } </style></Head><Body><inputtype= "button"value= "Create List"ID= "BT"/><DivID= "DV"></Div><Scriptsrc= "Common.js"></Script><Script> varKungfu= ["Dragon 18 Palm", "hitting the dog stick method", "Northern Underworld", "Easy rib Warp", "smiling Half-step epilepsy", "Heaven and earth Flash"]; //Click the button to dynamically create the list and add the list to the Divmy$ ("BT"). onclick= function () { //Create UL, add UL to parent element immediately varUlobj=Document.createelement ("ul"); my$ ("DV"). appendchild (Ulobj); //dynamic creation of Li, added to UL for (varI= 0; I<kungfu.length; I++) { varLiobj=Document.createelement ("Li"); //set the text in Liliobj.innerhtml=Kungfu[i]; //append Li to ulUlobj.appendchild (liobj); //Add mouse entry events for LiLiobj.onmouseover=Mouseoverhandle; //Add mouse leave event for LiLiobj.onmouseout=Mouseouthandle; } }; //Button's Click event outside functionMouseoverhandle () { This. Style.backgroundcolor= "Red"; } functionMouseouthandle () { This. Style.backgroundcolor= ""; }</Script></Body></HTML>
JavaScript dynamically creates a list
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
