js如何克隆一個節點物件

antzone發表於2017-03-14
JS物件

在實際的應用中，有時候需要複製一個節點物件，然後將複製的內容放置於一個指定的位置，好在js中就提供了這樣的函式，非常的方便，下面就做一下簡單的介紹，希望能夠給大家帶來一定的幫助。

有些人可能想到使用appendChild()函式，因為它可以將一個節點插入到指定元素內部的尾部，但是這裡特別注意的是，此函式是移動，而並非克隆，看下面的程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>元素的克隆例項程式碼-螞蟻部落</title> 
<style type="text/css"> 
ul{list-style:none} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  var lis=document.getElementsByTagName("li");
  var uls=document.getElementsByTagName("ul");
  var bt=document.getElementById("bt");
  bt.onclick=function(){uls[0].appendChild(lis[0]);}
} 
</script> 
</head> 
<body> 
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>  
</ul>
<input type="button" value="點選測試結果" id="bt" />
</body> 
</html>

由上面的程式碼表現可以看出，appendChild()函式是移動一個元素，並不是複製。

如果需要克隆一個元素，可以使用cloneNode()，下面做一下簡單介紹。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
object.cloneNode(bCloneChildren )

此函式可以克隆object物件，也就是建立一個副本。

它具有一個布林型的引數，如果是true的話就同時克隆object下的子元素，如果為false就不克隆子元素。

例項程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>元素的克隆例項程式碼-螞蟻部落</title> 
<style type="text/css"> 
ul{list-style:none} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  var lis=document.getElementsByTagName("li");
  var uls=document.getElementsByTagName("ul");
  var bt=document.getElementById("bt");
   
  bt.onclick=function(){
    var newli=lis[0].cloneNode(lis[0]);
    uls[0].appendChild(newli);
  }
} 
</script> 
</head> 
<body> 
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>  
</ul>
<input type="button" value="點選測試結果" id="bt" />
</body> 
</html>


相關文章