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

JavaScript克隆节点——cloneNode

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

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

案例:
01<html>
02<head>
03<title>Test of cloneNode Method</title>
04</head>
05<body>
06<div id="main">
07  <div id="div-0">
08    <span>Cloud018 said, </span>
09    <span>"Hello World!!!"</span>
10  </div>
11</div>
12<script>
13window.onload = function () {
14  var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象
15  for (var i = 1; i < 5; i++) {
16    var clonedNode = sourceNode.cloneNode(true); // 克隆节点
17    clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值,避免id 重复
18    sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
19  }
20}
21</script>
22</body>
23</html>