在实际的应用中,有时候需要复制一个节点对象,然后将复制的内容放置于一个指定的位置,好在js中就提供了这样的函数,非常的方便,下面就做一下简单的介绍,希望能够给大家带来一定的帮助。

有些人可能想到使用appendChild()函数,因为它可以将一个节点插入到指定元素内部的尾部,但是这里特别注意的是,此函数是移动,而并非克隆,看下面的代码实例:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>元素的克隆实例代码-51前端</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>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
  <li>51前端四</li>  
</ul>
<input type="button" value="点击测试结果" id="bt" />
</body> 
</html>
由上面的代码表现可以看出,appendChild()函数是移动一个元素,并不是复制。

如果需要克隆一个元素,可以使用cloneNode(),下面做一下简单介绍。

语法结构:
   [ 其他 ] 运行代码    下载代码
<script>
object.cloneNode(bCloneChildren )
</script>
此函数可以克隆object对象,也就是创建一个副本。

它具有一个布尔型的参数,如果是true的话就同时克隆object下的子元素,如果为false就不克隆子元素。

实例代码如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>元素的克隆实例代码-51前端</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>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
  <li>51前端四</li>  
</ul>
<input type="button" value="点击测试结果" id="bt" />
</body> 
</html>

代码描述:js 克隆节点对象。js如何克隆一个节点对象



425 566



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到