06-li移动第二种形式

Posted 刘选航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了06-li移动第二种形式相关的知识,希望对你有一定的参考价值。

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移动第二种形式的主要内容,如果未能解决你的问题,请参考以下文章

C#如何从第二种形式创建第一种形式的对象

事件绑定的第二种形式

PHP 多种形式,第二种使用来自第一种的数据

第二种形式的数据是如何发送到表中的?

线程创建的第二种方法

事件绑定的第二种形式 & call