js appendChild 自带remove和append两个功能
一提到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两个功能的更多相关文章
- 【转】JS大总结(带实例)
JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...
- css文件和js文件后面带一个问号
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- css文件和js文件后面带一个问号----2015-1103
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 图片base64转file文件的两种方式
js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...
- js setTimeout 传递带参数的函数的2种方式
js setTimeout 传递带参数的函数的2种方式 Created by Marydon on 2018年9月14日 1.准备工作 function sayYourName(param) { ...
- js课程 2-7 带默认参数的函数怎么写
js课程 2-7 带默认参数的函数怎么写(注意参数顺序) 一.总结 一句话总结:默认参数一定要放在最后面,而且还有注意你调用参数的时候给参数的顺序习惯.直接加个等于号就可以是默认参数.function ...
- oldboy s21day12.设计商城系统，主要提供两个功能：商品管理、会员管理。
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.写出三元运算的基本格式及作用?'''a if a>b else b''' # 2.什么是匿名函数? ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
随机推荐
- BZOJ 3230 相似子串 ——后缀数组
题目的Source好有趣. 我们求出SA,然后求出每一个后缀中与前面本质不同的字符串的个数. 然后二分求出当前的字符串. 然后就是正反两次后缀数组求LCP的裸题了. 要注意,这时两个串的起点可能会相同 ...
- 【angularjs学习】简单的语法
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country ...
- linux命令dhclient
linux命令 dhclient 背景 多台服务器(CentOS7 系统)设置静态IP,其中有台服务器设置了静态IP后,只要重启就变更为其他的,但是配置文件并无改动. 使用命令 #自动获取IP dhc ...
- 巴蜀1088 Antiprime数
Description 如果一个自然数n(n>=1),满足所有小于n的自然数(>=1)的约数个数都小于n的约数个数,则n是一个Antiprime数.譬如:1, 2, 4, 6, 12, 2 ...
- 【HDOJ5950】Recursive sequence（矩阵乘法，快速幂）
题意:f[1]=a,f[2]=b,f[i]=2f[i-2]+f[i-1]+i^4(i>=3),多组询问求f[n]对2147493647取模 N,a,b < 2^31 思路:重点在于i^4的 ...
- govalidator----结构体tag验证
github地址:https://github.com/asaskevich/govalidator govalidator支持内置支持的验证tag和自定义验证tag: package main im ...
- hdu - 1269 迷宫城堡 (强连通裸题)
http://acm.hdu.edu.cn/showproblem.php?pid=1269 判断一个图是不是强连通,缩点之后判断顶点数是不是为1即可. #include <iostream&g ...
- Easy sssp（spfa）（负环）
vijos 1053 Easy sssp 方法:用spfa判断是否存在负环 描述 输入数据给出一个有N(2 <= N <= 1,000)个节点,M(M <= 100,00 ...
- 嵌入式cpu架构
原文:http://www.kaixin001.com/repaste/11007221_7220618944.html### 内容: 目前主要CPU架构有ARM.X86/Atom.MIPS.Powe ...
- Python基础语法04-数据结构
Python Number(数字) Python Number 数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值,将重新分配内存空间. Python 支持 ...