JS中li移动第二种形式
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
你可以使用 appendChild() 方法移除元素到另外一个元素。
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 #ul2{background: yellow;} 9 </style> 10 </head> 11 <body> 12 <ul id="ul1"> 13 <li>1</li> 14 <li>2</li> 15 <li>3</li> 16 <li>4</li> 17 </ul> 18 19 <input type="button" name="" id="btn1" value="移动" /> 20 21 <ul id="ul2"> 22 </ul> 23 </body> 24 <script type="text/javascript"> 25 window.onload = function(){ 26 var oUl1 = document.getElementById("ul1"); 27 var oUl2 = document.getElementById("ul2"); 28 var oBtn = document.getElementById("btn1"); 29 30 oBtn.onclick = function(){ 31 //先找到在移动的元素（节点） 32 var oLi = oUl1.firstElementChild; 33 //console.log(oLi); 34 //var oLi = oUl1.children[0]; 35 36 //ul1 中删除 37 //oUl1.removeChild(oLi); 38 //ul2 中添加 39 oUl2.appendChild(oLi); 40 //1.先将元素从它原有的父级元素上删除 41 //2.添加到新父级元素中 42 } 43 44 45 } 46 </script> 47 48 </html>