一提到appendChild ,我们就知道是在父节点上增加子节点。

经常使用到它就是动态增加一个元素，将其加入到指定的父节点下。

其实appendChild除了这个功能之外，他还有一个功能:如果子节点不是动态创建的元素，而是在某个元素下的子元素，那么他还会自动执行一次removeChild功能。

举个栗子：将ul1下的li移动到ul2下：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>appendChild自带removeChild功能</title>

        <style type="text/css">

            #ul1{

                background: red;

            }

            #ul2{

                background: greenyellow;

            }

        </style>

    </head>

    <body>

        <ul id="ul1">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

        <button id="btn1">移动</button>

        <ul id="ul2"></ul>

    </body>

</html>

正常思路下的javascript:

<script type="text/javascript">

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

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

    var btn1 = document.getElementById("btn1");

    btn1.onclick = function(){

        //获取ul1下所有li

        olis = ul1.getElementsByTagName("li");

        if(olis.length>0){

            //获取ul1下的第一个li

            var oLi = ul1.children[0];

            //删除ul1下面的第一个li

            ul1.removeChild(oLi);

            //给ul2下面增加ul1下的第一个Li

            ul2.appendChild(oLi);

        }

    }

</script>

去掉removeChild下的javascript:

<script type="text/javascript">

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

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

    var btn1 = document.getElementById("btn1");

    btn1.onclick = function(){

        //获取ul1下所有li

        olis = ul1.getElementsByTagName("li");

        if(olis.length>0){

            //获取ul1下的第一个li

            var oLi = ul1.children[0];

            //删除ul1下面的第一个li

            //ul1.removeChild(oLi);

            //给ul2下面增加ul1下的第一个Li

            ul2.appendChild(oLi);

        }

    }

</script>

其实有没有removeChild ul1下的li效果都是一样的，因为appendChild()会先remove子元素之前位置父元素下的该元素，然后再新的父元素上添加该子元素。

js appendChild 自带remove和append两个功能的更多相关文章

  1. 【转】JS大总结(带实例)

    JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...

  2. css文件和js文件后面带一个问号

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  3. css文件和js文件后面带一个问号----2015-1103

    经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...

  4. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  6. js setTimeout 传递带参数的函数的2种方式

      js setTimeout 传递带参数的函数的2种方式 Created by Marydon on 2018年9月14日 1.准备工作 function sayYourName(param) { ...

  7. js课程 2-7 带默认参数的函数怎么写

    js课程 2-7 带默认参数的函数怎么写(注意参数顺序) 一.总结 一句话总结:默认参数一定要放在最后面,而且还有注意你调用参数的时候给参数的顺序习惯.直接加个等于号就可以是默认参数.function ...

  8. oldboy s21day12.设计商城系统，主要提供两个功能：商品管理、会员管理。

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.写出三元运算的基本格式及作用?'''a if a>b else b''' # 2.什么是匿名函数? ...

  9. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

随机推荐

  1. SPOJ 375 Query on a tree【树链剖分】

    题目大意:给你一棵树,有两个操作1.修改一条边的值,2.询问从x到y路径上边的最大值 思路:如果树退化成一条链的话线段树就很明显了,然后这题就是套了个树连剖分,调了很久终于调出来第一个模板了 #inc ...

  2. getParameter 与 getAttribute的区别

    request.getAttribute():是request时设置的变量的值,用request.setAttribute("name","您自己的值");来设 ...

  3. 【CF659F】Polycarp and Hay（并查集，bfs）

    题意: 构造一个矩阵,使得: 矩阵所有格子中数字都小于等于原矩阵,并且至少有一个元素和原矩阵相等, 构造的矩阵除了0以外的数字必须联通并且相等,矩阵中元素之和为K. n,m<=1e3,1< ...

  4. Mysql 函数的应用

    CREATE TABLE `code_generate_dd` ( `id` ) NOT NULL AUTO_INCREMENT COMMENT '主键', `first_code` ) NOT NU ...

  5. 一个强大的Android模拟器Genymotion

    相信很多Android开发者一定受够了速度慢.体验差效率及其地下的官方模拟器了,自己在平时的开发中几乎是不会用模拟器的,等的时间太久了,但是在一些尺寸适配或是兼容性测试的时候没有足够多的机器进行测试, ...

  6. hdu4862 2014多校B题/ 费用流（最优情况下用不大于K条路径覆盖）（不同的解法）

    题意: 一个数字矩阵,可以出发K次,每次可以从右边或者下面走,要求(在收益最大情况下)覆盖全图,不能则输出-1.(规则:每次跳一步的时候若格子数字相等则获得该数字的能量,每跳一步消耗距离的能量).每个 ...

  7. LeetCode OJ--Implement strStr()

    http://oj.leetcode.com/problems/implement-strstr/ 判断一个串是否为另一个串的子串 比较简单的方法,复杂度为O(m*n),另外还可以用KMP时间复杂度为 ...

  8. BZOJ——1720: [Usaco2006 Jan]Corral the Cows 奶牛围栏

    http://www.lydsy.com/JudgeOnline/problem.php?id=1720 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1 ...

  9. ArcCatalog中通过ArcSDE向Oracle数据库中导入数据

    将数据导入到Oracle指定的表空间的具体内容如下: 首先,在ArcCatalog中建立指定表空间的数据库连接(要以指定表空间的用户登录): 然后,在ArcCatlog中定位到数据源,选中并拷贝图层; ...

  10. Go -- 并发编程的两种限速方法

    引子 golang提供了goroutine快速实现并发编程,在实际环境中,如果goroutine中的代码要消耗大量资源时(CPU.内存.带宽等),我们就需要对程序限速,以防止goroutine将资源耗 ...