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>