复制节点
在DOM中，提供了node.cloneNode()方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法为“需要被复制的节点.cloneChild(true/false) ”。如果参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的子节点；如果括号参数为true，则是深拷贝，即会复制节点本身及里面所有的子节点。示例代码如下。
1 <body>
2 <ul id="myList"><li>苹果</li><li>橙子</li><li>橘子</li></ul>
3 <ul id="op"></ul>
4 <button onclick="myFunction()">点我</button>
5 <script>
6 function myFunction() {
7 var item = document.getElementById('myList').firstChild;
8 var cloneItem = item.cloneNode(true);
9 document.getElementById('op').appendChild(cloneItem);
10 }
11 </script>
12 </body>上述代码中，当单击“点我”按钮的时候，触发myFunction()函数，其中第7行代码获取id为myList列表中的第一个元素。第8行调用cloneNode(true)方法，复制第7行获取到的元素item。第9行获取id为op的元素，并使用appendChild()方法将复制完成的cloneItem节点添加到id为op的元素中。效果如图1所示。
图1 cloneNode(true)
修改上述第8行代码，把cloneNode(true)的参数true改为false，效果如图2所示。
图2 cloneNode(false)
从图2可知，当参数为false时只有一个空的li元素被复制。
点击此处
隐藏目录
隐藏目录
