js循环复制一个div

xmjava 2020年03月31日 Web前端 580 0

<html>  
<head>  
<title>Test of cloneNode Method</title>  
<script type="text/javascript" src="test.js"></script>  
</head>  
<body>  
<div id="main">  
<div id="div-0">  
<span>Cloud018 said, </span>  
<span>"Hello World!!!"</span>  
</div>  
</div>  
</body>  
</html>  
 
// test.js  
window.onload = function () {  
var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象  
for (var i = 1; i < 5; i++) {  
var clonedNode = sourceNode.cloneNode(true); // 克隆节点  
clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复  
sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点  
}  
}