詳解javascript appendChild()的完整功能
更新時間：2018年08月18日 11:41:31 作者：666888
這篇文章主要介紹了詳解javascript appendChild()的完整功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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的第二種功能實現(xiàn)一個li按照內(nèi)容大小排序
<!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是一個元素集合，不是真正意義的數(shù)組，不能用sort方法，轉(zhuǎn)成數(shù)組再用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]);//當(dāng)添加子元素的時候以前的元素已經(jīng)被刪除，所以不會出現(xiàn)重復(fù)元素
}
}
}
</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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了關(guān)于Bootstrap基本模板的使用和理解的學(xué)習(xí)記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
理解Javascript_14_函數(shù)形式參數(shù)與arguments
在'執(zhí)行模型詳解'的'函數(shù)執(zhí)行環(huán)境'一節(jié)中對arguments有了些許的了解，那么讓我們深入的分析一下函數(shù)的形式參數(shù)與arguments的關(guān)系。2010-10-10
為了給用戶一個流暢的體驗,token過期后需要重新請求新的token替換過期的token。本文將詳細(xì)介紹uniapp無痛刷新token方法。2021-06-06
pureClearButton是一款基于Bootstrap的非常實用的用于清空和重置input輸入框內(nèi)容的jQuery按鈕插件，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了詳解如何替換項目中的if-else和switch，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
JS把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
本文給大家介紹了42種瀏覽器兼容性問題大匯總的相關(guān)知識，本文介紹的非常詳細(xì)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript中call,apply,bind的區(qū)別與實現(xiàn)
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實現(xiàn),文章通過圍繞主題思想展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
利用JavaScript實現(xiàn)的10種排序算法總結(jié)
這篇文章主要介紹了利用JavaScript實現(xiàn)的十種排序算法，主要介紹了冒泡，選擇，插入，希爾，歸并，快速，堆排，計數(shù)，桶排和基數(shù)，有感興趣的小伙伴可以參考閱讀本文2023-05-05