首页 > 建站教程 > JS、jQ、TS >  JavaScript克隆节点——cloneNode正文

JavaScript克隆节点——cloneNode

很多时候我们会用for 来生成多个结构相同的节点结构，这样我们需要写很多createElement、setAttribute、appendChild 等代码。 但其实我们只需要有一个html 的模板，就可以用cloneNode 方法对已有的节点进行克隆，包括其子节点。 

以下是 cloneNode 方法原型：  
newElement oldElement.cloneNode(bool deep);
这个方法只有一个参数deep，布尔值，如果为true，则克隆oldElement 这个及其子节点，否则只可能这个节点本身。返回值就是一个克隆的节点newElement。

案例： 
<html> 
<head> 
<title>Test of cloneNode Method</title>
</head> 
<body> 
<div id="main"> 
  <div id="div-0"> 
    <span>Cloud018 said, </span> 
    <span>"Hello World!!!"</span> 
  </div> 
</div>
<script>
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); // 在父节点插入克隆的节点 
  } 
} 
</script>
</body> 
</html>
TAGS: cloneNode