標籤:存在 ntc utf-8 button cti 刪除 strong child 方法
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>
06-li移動第二種形式