1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         #ul1
  8.         {
  9.             background-color: green;
  10.         }
  11.  
  12.         #ul2
  13.         {
  14.             background-color: yellow;
  15.         }
  16.     </style>
  17.     <script type="text/javascript">
  18.         window.onload = function () {
  19.             var oBtn = document.getElementById("btnChange");
  20.             var oUl1 = document.getElementById("ul1");
  21.             var oUl2 = document.getElementById("ul2");
  22.             var aLi = document.getElementsByTagName("li");
  23.  
  24.             //for (var i = 0; i < aLi.length; i++) {
  25.             //    aLi[i].onclick = function () {
  26.             //        oUl1.removeChild(this);
  27.             //        oUl2.appendChild(this);
  28.             //    }
  29.             //}
  30.             oBtn.onclick = function () {
  31.                 var oLi = oUl1.children[0];
  32.                 oUl1.appendChild(oLi)
  33.                 //oUl1.removeChild(oLi);
  34.                 //oUl2.appendChild(oLi);//1.先把元素从原有的父级别上删掉，在添加到新的父级上
  35.             }
  36.         }
  37.     </script>
  38. </head>
  39. <body>
  40.     <ul id="ul1">
  41.         <li>1</li>
  42.         <li>2</li>
  43.         <li>3</li>
  44.         <li>4</li>
  45.         <li>5</li>
  46.     </ul>
  47.     <input type="button" value="移动" id="btnChange" />
  48.     <ul id="ul2">
  49.     </ul>
  50. </body>
  51. </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. Codevs 1105 过河

     时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond  题目描述 Description 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有 ...

  2. [NOIP2014]解方程

    3732 解方程  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 输入描述 Input Descrip ...

  3. Archiving

    There are typically four steps of archving: Preprocessing Write Store Delete   Normally Store is inv ...

  4. Hadoop 的部署适用性（网上资料http://www.linuxidc.com/Linux/2013-10/92141.htm）

    近些年,Hadoop和“走向大数据分析引擎”一样,受到颇多赞誉.对很多人来说,Hadoop就意味着大数据技术.但其实开源的分布式处理框架未必能解决所有的大数据问题.这就要求想要部署Hadoop的公司慎 ...

  5. AngularJS(12)-BootStrap集成

    AngularJS 的首选样式表是 Bootstrap, Bootstrap 是目前最受欢迎的前端框架. <!DOCTYPE html> <html lang="en&qu ...

  6. windows下apache配置https

    1.下载带有openSSL的apache安装包,我下载的为apache_2.2.11-win32-x86-openssl-0.9.8i.msi,安装后确认一下bin路径下的openssl.exe,ss ...

  7. [大牛翻译系列]Hadoop（8）MapReduce 性能调优：性能测量（Measuring）

    6.1 测量MapReduce和环境的性能指标 性能调优的基础系统的性能指标和实验数据.依据这些指标和数据,才能找到系统的性能瓶颈.性能指标和实验数据要通过一系列的工具和过程才能得到. 这部分里,将介 ...

  8. Python中Cookie的处理（二）cookielib库

    Python中cookielib库(python3中为http.cookiejar)为存储和管理cookie提供客户端支持. 该模块主要功能是提供可存储cookie的对象.使用此模块捕获cookie并 ...

  9. JDBC 基本操作： ＣＲＵＤ

    Jdbc中的statement对象用于向数据库发送SQL语句,想完成对数据库的增删改查,只需要通过这个对象向数据库发送增删改查语句即可. Statement对象的executeUpdate方法,用于向 ...

  10. SQLserver关于教学楼中教室在某个时间段是否被占用的数据库设计

    需求:关于教学楼中教室在周几某个时间段是否被占用的数据库设计 具体代码如下: -------------------教学楼维度 CREATE TABLE TeacBuild ( tbID int no ...