JavaScript在指定元素後面插入元素

antzone發表於2017-11-20
JavaScript

本章節介紹一下如何利用javascript將一個指定元素移動到另一個元素的後面。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
function insertAfter(newElement,targetElement){ 
  var parent=targetElement.parentNode; 
  if(parent.lastChild==targetElement){ 
    parent.appendChild(newElement); 
  } 
  else{ 
    parent.insertBefore(newElement,targetElement.nextSibling); 
  } 
} 
window.onload=function(){ 
  var bt=document.getElementById("bt");
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
   
  bt.onclick=function(){
    insertAfter(lis[0],lis[3])
  }
} 
</script>  
</head>  
<body>  
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

以上程式碼實現了我們的要求，下面對此功能實現過程做一下簡單介紹。

特別說明:appendChild()和insertBefore()都是移動元素，而不是克隆一個元素，然後再插入。

一.程式碼註釋:

（1）.function insertAfter(newElement,targetElement){}，此函式可以在指定元素的後面插入指定元素，第一個引數是要插入的元素，第二個引數是目標元素，也就是會在它的後面插入元素。

（2）.var parent=targetElement.parentNode，獲取目標元素的父元素。

（3）.if(parent.lastChild==targetElement){parent.appendChild(newElement);}，判斷父節點的最有一個子節點是否就是目標節點，如果是的話就使用appendChild()函式進行節點追加。

（4）.else{parent.insertBefore(newElement,targetElement.nextSibling);}，如果目標節點不是最後一個節點，那麼就使用insertBefore()函式進行插入操作。

二.相關閱讀:

（1）.parentNode參閱JavaScript parentNode一章節。 

（2）.lastChild參閱JavaScript lastChild一章節。

（3）.appendChild()參閱JavaScript appendChild()一章節。

（4）.nextSibling參閱JavaScript nextSibling一章節。

（5）.getElementsByTagName()參閱getElementsByClassName()一章節。

相關文章