IT虾米网

js循环复制一个div详解

shasha 2020年03月31日 编程语言 179 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); // 在父节点插入克隆的节点  
}  
}
发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Vue2.0 搭建Vue脚手架(vue-cli)详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。