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>