06-li移動第二種形式

來源:互聯網
上載者:User

標籤:存在   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移動第二種形式

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.