05-JS中li移动第一种形式

JS中li移动第一种形式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #ul1{background: green;}
 8         </style>
 9     </head>
10     <body>
11         <input type="button" name="" id="btn1" value="移动" />
12         <ul id="ul1">
13             <li>1</li>
14             <li>2</li>
15             <li>3</li>
16             <li>4</li>
17         </ul>
18         
19         
20     </body>
21     <script type="text/javascript">
22         window.onload = function(){
23             var oUl1 = document.getElementById("ul1");
24             var oBtn = document.getElementById("btn1");
25             
26             oBtn.onclick = function(){
27                 //先找到在移动的元素（节点）
28                 //firstElementChild方法，这个方法可以获取到父元素的第一个子元素节点
29                 var oLi = oUl1.firstElementChild;
30                 oUl1.appendChild(oLi);
31             
32             }
33             
34             
35         }
36     </script>
37     
38 </html>