克隆节点-CFANZ编程社区

克隆节点使用 cloneNode()即可，语法：

var 副本元素 = 元素.cloneNode(布尔值);

圆括号中的布尔值，如果是 true，则表示要将这个节点的所有子节点一并克隆，即深度克隆。如果是 false，

表示只克隆这个节点自己，而不克隆它的内部子节点，即浅克隆。

看一个例子：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</div>

var box1 = document.getElementById("box1");

var box2 = document.getElementById("box2");

//得到 ul

var ul = box1.getElementsByTagName("ul")[0];

//克隆 ul 和 ul 的所有后代（true 表示深度克隆），然后追加到 box2 中

box2.appendChild(ul.cloneNode(true));

</script>

</body>

</html>

程序运行后，原本在 box1 中的无序列表现在被深度克隆了一份并被追加到了 box2 中。程序运行后，打开

审查元素的“Elements”面板检查是否克隆成果

实战案例：九九乘法表

题目：制作一个九九乘法表的表格。

解决题目的思路是使用两层 for 循环嵌套动态创建表格的 tr 和 td 节点，并动态设置 td 的内部内容，完成

九九乘法表的制作。

代码如下：

//创建一个表格

var myTable = document.createElement("table");

//使用两层 for 循环嵌套动态创建表格的 tr 和 td 节点

for(var i = 1 ; i <= 9 ; i++){

//创建 tr

var tr = document.createElement("tr");

for(var j = 1 ; j <= 9 ; j++){

//创建 td

var td = document.createElement("td");

//设置 td 内部的文本

td.innerText = i + "×" + j + "=" + (i * j);

//追加 td

tr.appendChild(td);

}

//追加 tr

myTable.appendChild(tr);

}

//追加表格

document.body.appendChild(myTable);

</script>

程序中外层 for 循环用来创建 tr 节点，内层 for 循环用来创建 td 节点。内层的 td 节点被追加到了此时

外层创建的 tr 节点内，形成 9 行 9 列的表格。注意 td 内部的 innerText 属性的连字符写法。