一提到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. BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡 ——广义后缀自动机

    神奇的性质,叶子节点不超过20个. 然后把这些节点提出来构成一颗新树,那么这些树恰好包含了所有的情况. 所以直接广义后缀自动机. 然后统计本质不同的字符串就很简单显然了. #include <c ...

  2. POJ 3581 Sequence ——后缀数组 最小表示法

    [题目分析] 一见到题目,就有了一个显而易见obviously的想法.只需要每次找到倒过来最小的那一个字符串翻转就可以了. 然而事情并不是这样的,比如说505023这样一个字符串,如果翻转了成为320 ...

  3. [BZOJ3545] [ONTAK2010]Peaks（线段树合并 + 离散化）

    传送门 由于困难值小于等于x这个很恶心,可以离线处理,将边权,和询问时的x排序. 每到一个询问的时候,将边权小于等于x的都合并起来再询问. .. 有重复元素的线段树合并的时间复杂度是nlog^2n # ...

  4. 使用vue-cli创建项目（包含npm和cnpm的安装nodejs的安装）

    转:http://www.cnblogs.com/wisewrong/p/6255817.html vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue ...

  5. excel打乱各行的顺序，实现无序随机排列

    由于公司做活动,经常会发些激活码过来,为了让激活码能够充分使用,经常要打乱激活码的顺序,百度了下,看了下网上的介绍,还不错,挺实用,记录下来. 具体方法如下: 1.将文本里的内容复制到Excel里的任 ...

  6. HDU4850 构造一个长度为n的串，要求任意长度为4的子串不相同

    n<=50W.(使用26个字母) 构造方法:26个,最多构造出26^4种不同的串,长度最长是26^4+3,大于是输出"impossble",用四维数组判重.每次向前构造一位( ...

  7. 2015多校联合训练赛 Training Contest 4 1008

    构造题: 比赛的时候只想到:前面一样的数,后面 是类似1,2,3,4,5,6....t这 既是:t+1,t+1...,1,2,3,...t t+1的数目 可能 很多, 题解时YY出一个N 然后对N   ...

  8. java list实现树形结构

    1.javabean import java.util.List; public class TreeNode { private String id; private String parentId ...

  9. Linux下xz与tar的区别

    同一文件,tar.xz格式比tar.gz格式小了三分之一! 说明: xz是一个使用LZMA压缩算法的无损数据压缩文件格式. 和gzip与bzip2一样,同样支持多文件压缩,但是约定不能将多于一个的目标 ...

  10. 【C#】RGB,CMYK,HSB各种颜色表示的转换（转）

    [C#]RGB,CMYK,HSB各种颜色表示的转换   一.表示颜色的方式有很多种,如RGB,CMYK,HSB,Hex等等 1.RGB:这种表示颜色由三原色构成,通过红,绿,蓝三种颜色分量的不同,组合 ...