很多时候，我们需要通过HTML DOM和JavaScript动态生成许多相同的节点，包括它们的子节点。

很多时候我们使用for来生成多个结构相同的节点结构，所以需要写很多createElement、setAttribute、appendChild等代码。

但实际上我们只需要有一个html模板，就可以用cloneNode的方法克隆现有的节点，包括它们的子节点。以下是cloneNode方法的原型：

new element old element . clone node(bool deep)；

这个方法只有一个参数，深度，布尔值。如果为true，将克隆oldElement及其子节点。否则，只有节点本身是可能的。

返回值是克隆的节点newElement。

下面是测试代码、test.js和test.js文件。复制代码如下：-test.htm-html head title test of clone node方法/title script type=' text/JavaScript ' src=' test . js '/script/head body div id=' main ' div id=' div-0 ' span cloud 018表示，/span span'Hello World！/span /div /div /body /html代码复制代码如下：//test . js window . onload=function(){ var sourcenode=document . getelementbyid(' div-0 ')；//获取克隆的节点对象(var I=1；i5；I){ var clonedNode=source node . clone node(true)；//克隆节点clonednode.setattribute ('id '，' div-' I)；//修改id值避免id重复：source node . parent node . append child(cloned node)；//在父节点中插入克隆的节点}}网页加载结果如下：用Google Chrome的开发者工具可以看到，div-0的节点结构被复制了。当cloneNode的deep参数设置为false时，只克隆div-0节点本身，而不复制其子节点(即其内容)。

复制代码如下：var cloned node=source node . clone node(false)；

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。