Way to dynamically create a list of 24 createElement

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
          margin: 0;
          padding: 0;
        }
    
        ul {
          list-style-type: none;
          cursor: pointer;
        }
    
        div {
          width: 200px;
          height: 400px;
          border: 2px solid red;
        }
      </style>
    </head>
    <body>
        <input type="button" value="创建列表" id="btn" />
        <div id="dv"></div>
        <script src="common.js"></script>
        <script>
            [=kung fuwas" Beating dragon 18 palms " , " deeply grieved palm " , " holy canon " , " human resource configurations " , " Xixingtaifa " , " Buddha's Palm " , " Huagumianzhang " , " Yunvxinjing " , " bliss magic " , " evil spirits Jianpu " ]; 
            My $ ( " btn " ) .onclick =  function () {
                 // create ul,Ul immediately added to the parent element div in 
                var ulObj= Document.createElement ( " ul " ); 
                My $ ( " DV " ) .appendChild (ulObj); 

                // dynamically created li, ul is added 
                // array circulated 
                for ( var I =  0 ; I < kungfu. length; I ++ ) {
                     var liObj = document.createElement ( " li " );
                     // set the text li intermediate 
                    liObj.innerHTML = kungfu [I]; 
                    ulObj.appendChild (liObj);

                    // highlight effect 
                    // add mouse event is entered li 
                    liObj.onmouseover = onmouseoverHandle;
                     // add to a mouse leave event li 
                    liObj.onmouseout = onmouseoutHandle; 
                } 
            }; 
            // click of a button outside the function 
            function onmouseoverHandle () {
                 the this .style.backgroundColor =  " Red " ; 
            }; 

            function onmouseoutHandle () {
                 the this .style.backgroundColor =  "" ; 
            }; 
            
            //If you are adding a function of cycle ways, it is recommended to use a named function (above method) - Space-saving 
            // if not cyclic way to add functions, it is recommended to use an anonymous function 
        </ Script > 
    </ body > 
</ HTML >
Way to dynamically create a list of 24 createElement

Guess you like
