码迷,mamicode.com
首页 > 移动开发 > 详细

06-li移动第二种形式

时间:2017-11-08 20:56:34      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:存在   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移动第二种形式

标签:存在   ntc   utf-8   button   cti   删除   strong   child   方法   

原文地址:http://www.cnblogs.com/liuxuanhang/p/7805889.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!