<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #ul1

        {

            background-color: green;

        }

        #ul2

        {

            background-color: yellow;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oBtn = document.getElementById("btnChange");

            var oUl1 = document.getElementById("ul1");

            var oUl2 = document.getElementById("ul2");

            var aLi = document.getElementsByTagName("li");

            //for (var i = 0; i < aLi.length; i++) {

            //    aLi[i].onclick = function () {

            //        oUl1.removeChild(this);

            //        oUl2.appendChild(this);

            //    }

            //}

            oBtn.onclick = function () {

                var oLi = oUl1.children[0];

                oUl1.appendChild(oLi)

                //oUl1.removeChild(oLi);

                //oUl2.appendChild(oLi);//1.先把元素从原有的父级别上删掉，在添加到新的父级上

            }

        }

    </script>

</head>

<body>

    <ul id="ul1">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <input type="button" value="移动" id="btnChange" />

    <ul id="ul2">

    </ul>

</body>

</html>

　　

Javascript中appendChilid()内涵的更多相关文章

  1. 直播开始：'云榨汁机'诞生记--聊聊JavaScript中的'业务建模'

    闭包是JavaScript中的一个重要特性,在之前的博文中,我们说闭包是一个'看似简单,其实很有内涵'的特性.当我们用JavaScript来实现相对复杂的业务建模时,我们可以如何利用'闭包'这个特性呢 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  4. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  5. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  6. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  7. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  8. 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  9. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

随机推荐

  1. GNU Binutils工具

    参考<程序员的自我修养---连接.装载与库> 以下内容转贴自 http://www.cnblogs.com/xuxm2007/archive/2013/02/21/2920890.html ...

  2. 记录一下hdu的几道题

    杭州电子科技大学程序设计竞赛 2016‘12-网络同步赛 前几天看到这个比赛,想着要是到时候没事就做一下,但是中午实在太困,加上水平太次,才a了4道题目. 说明:我是看ac人数多少的顺序来做题的. 1 ...

  3. Linux多命令协作：管道及重定向

  4. 基于BT协议的文件分发系统

    基于BT协议的文件分发系统构成:    1.一个Web服务器:保存着种子文件    2.一个种子文件:保存共享文件的一些信息(文件名,文件大小    ,Tracker服务器地址,torrent为后缀) ...

  5. Informix 物联网应用示例(转)

    相关概念 MQTT 是一个物联网传输协议,它被设计用于轻量级的发布/订阅式消息传输,旨在为低带宽和不稳定的网络环境中的物联网设备提供可靠的网络服务.MQTT 是专门针对物联网开发的轻量级传输协议.MQ ...

  6. Delphi 两个应用程序（进程）之间的通信

    两个应用程序之间的通信实际上是两个进程之间的通信.由于本人知识有限,决定应用消息来实现.需要用到的知识: 1.RegisterWindowMessage(); //参数类型:pchar:返回值:Lon ...

  7. c位段

    假如程序表示四盏灯的开关状态灯只有开或关两种状态所以用1和0就可以表示为了节省内存就用一个二进制位表示一盏灯这里就定义位域用 a b c d 各表示一盏 这里定义时注意选用无符号类型位域允许用各种格式 ...

  8. ORA-15221: ASM operation requires compatible.asm of 11.2.0.0.0 or higher

    昨天在做存储迁移的时候,对ASM磁盘组的东西进行操作时,出现了如标题的错误.经查资料,发现原因如下:     如磁盘组是使用asmca图形化工具创建,则compatible.asm默认设置就已经为11 ...

  9. mdelay,udelay,msleep区别

    delay函数是忙则等待,占用CPU时间:而sleep函数使调用的进程进行休眠. udelay引用头文件/include/asm-***/delay.h,mdelay和ndelay则引用/includ ...

  10. CSS3 transition 属性 过渡效果

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...