在JavaScript中,我們可以使用cloneNode()方法來實現復制節點。
語法:
obj.cloneNode(bool)
說明:
參數obj表示被復制的節點,而參數bool是一個布爾值,取值如下:
(1)1或true:表示復制節點本身以及復制該節點下的所有子節點;
(2)0或false:表示僅僅復制節點本身,不復制該節點下的子節點;
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function add() { var e = document.getElementById("list"); document.body.appendChild(e.cloneNode(1)); } </script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>ASP.NET</li> </ul> <input type="button" value="添加" onclick="add()" /> </body> </html>
在浏覽器預覽效果如下:
分析:
當我們點擊“添加”按鈕之後,就會在body元素內把整個列表復制並插入。cloneChild()方法很簡單,沒太多要講的東西。