06-JS中li移动第二种形式-优快云博客

本文介绍了一个使用JavaScript实现的简单示例，演示如何通过appendChild()方法将一个列表项（li）从一个无序列表（ul）移动到另一个无序列表。此方法允许将节点从文档的一个位置移动到另一个位置。

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>