nodeClone()

<script type="text/javascript">
	
	window.onload=function()
	{

		var sourse=document.getElementById('div0')
		for(var i=1;i<5;i++)
		{
			var clone=sourse.cloneNode(true);
			clone.setAttribute('id','div'+i);
			sourse.parentNode.appendChild(clone);
		}
	}
</script>
</head>


<div id="div0">
	<div><p>fdfdfff</p></div>
	<span>dfdf</span>
</div>

nodeClone()

cloneNode(true);为true时克隆子代所有元素  false时只copy自己

注意
但是无论是浅拷贝还是深拷贝source都不会将自己的css属性克隆给clone
css代码
#div0{display: inline-block; width: 200px;}


效果如图
nodeClone()

nodeClone()

解决方法
if ( node.nodeType === 1 ) {
style = window.getComputedStyle( node );

styleKeys.forEach( function ( prop ) {
clone.style[ prop ] = style[ prop ];
});
这样clone就具有了node的css属性

你可能感兴趣的:(clone)