JavaScript用克隆代码方法克隆节点代码

很多时候我们会使用for来生成多个具有相同结构的节点结构，所以我们需要编写大量的代码，比如createElement、setAttribute和appendChild。但实际上，我们只需要一个html模板，就可以通过cloneNode方法克隆现有的节点，包括它们的子节点。下面是cloneNode方法原型：new element oldelement . cloneNode(booldeep)；这个方法只有一个参数，深布尔。如果为真，将克隆oldElement及其子节点；否则，只有节点本身是可能的。返回值是一个克隆的节点newElement。下面是测试代码，test.js和test.js文件。复制代码如下：-test.htm-html head title test of cloneNode Method/title脚本类型=' text/JavaScript ' src=' http : test . js '/脚本/head body div id=' main ' div id=' div-0 ' span cloud 018表示，/span span'Hello World！/span /div /div /body /html Code复制代码如下：//test . jswindow . onload=function(){ var source node=document . getelementbyid(' div-0 ')；//获取的克隆节点对象(var I=1；i5；I){ var clone node=source node . clone node(true)；//克隆节点clonednode.setattribute ('id '，' div-' I)；//修改id值，避免id source node . parent node . append child(clone node)重复；//将克隆的节点插入父节点}}网页加载结果如下：。

谷歌Chrome的开发者工具显示div-0的节点结构被复制了。

当cloneNode的deep参数设置为false时，只克隆div-0节点本身，不复制其子节点(即其内容)。复制代码如下： var clone node=source node . clone node(false)；