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>
时间： 2024-10-12 05:14:17