代码描述:js 克隆节点对象。js如何克隆一个节点对象
在实际的应用中,有时候需要复制一个节点对象,然后将复制的内容放置于一个指定的位置,好在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>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能