详解javascript appendChild()的完整功能
更新时间：2018年08月18日 11:41:31 作者：666888
这篇文章主要介绍了详解javascript appendChild()的完整功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
appendChild()常用功能。
- 平时我们用appendChild的时候，都是向父级上添加子元素
- appendChild的另一个功能是，先把元素从原有父级上删掉，然后添加元素到新的父级。（移除再添加）。
代码说明
<!DOCTYPE html>
<html>
<head>
<title>appendChild的第二种功能</title>
<script>
window.onload=function(){
var oUl1=document.getElementById("ul1");
var oUl2=document.getElementById("ul2");
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
var oLi=oUl1.children[0];
oUl1.appendChild(oLi);
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" id="btn1" value="移动">
</body>
</html>
用appendChild的第二种功能实现一个li按照内容大小排序
<!DOCTYPE html>
<html>
<head>
<title>appendChild的第二种功能</title>
<script>
window.onload=function(){
var oUl1=document.getElementById("ul1");
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
var aLi=oUl1.getElementsByTagName("li");
// aLi是一个元素集合，不是真正意义的数组，不能用sort方法，转成数组再用sort排序
var arr=[];
for(var i=0; i<aLi.length; i++){
arr.push(aLi[i]);
}
arr.sort(function(li1,li2){
var n1=parseInt(li1.innerHTML);
var n2=parseInt(li2.innerHTML);
return n1-n2
});
for(var j=0; j<arr.length; j++){
oUl1.appendChild(arr[j]);//当添加子元素的时候以前的元素已经被删除，所以不会出现重复元素
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>12</li>
<li>2</li>
<li>30</li>
<li>22</li>
</ul>
<input type="button" id="btn1" value="移动">
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了关于Bootstrap基本模板的使用和理解的学习记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
理解Javascript_14_函数形式参数与arguments
在'执行模型详解'的'函数执行环境'一节中对arguments有了些许的了解，那么让我们深入的分析一下函数的形式参数与arguments的关系。2010-10-10
为了给用户一个流畅的体验,token过期后需要重新请求新的token替换过期的token。本文将详细介绍uniapp无痛刷新token方法。2021-06-06
pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了JavaScript实现简单打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家介绍了详解如何替换项目中的if-else和switch，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
下面小编就为大家带来一篇JS把内容动态插入到DIV的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
本文给大家介绍了42种浏览器兼容性问题大汇总的相关知识，本文介绍的非常详细，感兴趣的朋友一起学习吧2015-12-12
JavaScript中call,apply,bind的区别与实现
这篇文章主要介绍了JavaScript中call,apply,bind的区别与实现,文章通过围绕主题思想展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了利用JavaScript实现的十种排序算法，主要介绍了冒泡，选择，插入，希尔，归并，快速，堆排，计数，桶排和基数，有感兴趣的小伙伴可以参考阅读本文2023-05-05
最新评论