JavaScript 中的 CloneNode() 方法?
顾名思义，它会克隆节点。JavaScript 中的 cloneNode() 方法会复制传入的节点对象并传递克隆节点对象。对于要复制的元素，只需调用 cloneNode() 方法即可。如果您还想复制元素的嵌套元素，请传递 true 作为选项。
如果参数为 true，它会连续克隆节点的所有子节点。如果不是，它只会复制节点本身，而不复制其任何子节点。传递的节点的 parentNode 属性为 null，并且它不是文档树的一部分。复制节点时，每个 Element 节点的特征都会被复制。但请记住，不会复制节点注册的事件侦听器函数。需要注意的是，空组件(如 <input> 和 <img>)元素不受 deep 的影响。
语法
let clonedNode = originalNode.cloneNode(deep);
参数
true - 如果值为 true，则复制可能包含在任何子文本节点以及整个子树中的文本。
false - 如果为 false，则仅复制节点。不会复制子树，这包括节点可能具有的任何文本。
返回值
新节点已克隆。除非使用 Node.appendChild() 之类的方法将克隆节点附加到已是文档一部分的另一个节点，否则它没有父节点，也不能成为文档的一部分。
有用的说明
CloneNode() 除了 DOM 结构之外，还仅从原始节点复制那些属性和内联侦听器。此外，它不会复制通过 addEventListener() 方法添加的任何事件侦听器，也不会复制通过 originalNode.with onclick = eventHandler() 等元素属性添加的事件侦听器。
当复制具有 id 属性的节点并将其放置在同一个页面中时，id 将被复制。在此示例中，您必须在将其包含在 DOM 树中之前修改 id。
示例 1
以下示例中使用 cloneNode() 方法复制 ul> 元素并将其插入到同一个文档中。
<!DOCTYPE html> <html> <title>CloneNode() method in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul id="main_menu"> <li>Home</li> <li>Facilities</li> <li>Activities</li> <li>Admissions</li> <li>Contact</li> </ul> <script> let menuItem = document.querySelector('#main_menu'); let clonedMenu = menuItem.cloneNode(true); clonedMenu.id = 'mobile_menu'; document.body.appendChild(clonedMenu); </script> </body> </html>
如何运作 −
首先，使用 querySelector() 函数选择带有 id 菜单的 ul。
其次，使用 cloneNode() 方法创建 ul 元素的深度克隆。
接下来，为了防止重复，修改克隆元素的 id。
之后，使用 appendChild() 函数将克隆元素附加到 document.body 的子节点。
示例 2
在下面的示例中，最初形成了两个列表。然后通过使用 javascript 方法"cloneNode()"，将第二个列表中的元素之一不加更改地复制到第一个列表中，并且结果也如输出中所示。
<!DOCTYPE html> <html> <title>CloneNode() method in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul id="menu1"> <li>Home</li> <li>Facilities</li> </ul> <ul id="menu2"> <li>Activities</li> <li>Admissions</li> </ul> <script> let menu_item = document.getElementById("menu2").firstChild; let clonedItem = menu_item.cloneNode(true); document.getElementById("menu1").appendChild(clonedItem); </script> </body> </html>
示例 3
在此示例中，让我们了解如何使用 JavaScript 克隆 Div 并更改其 ID
JavaScript 的 cloneNode 方法可用于克隆 div 并修改其 id。然后可以通过设置 id 属性来配置克隆元素的 ID。包含文档的 div 显示并将 getElementById 分配给 div。
然后我们克隆 div 并通过调用 div.cloneNode 并将其分配给 clone。要执行深度克隆，我们诚实地输入。最后，我们将 clone.id 设置为复制的 div 的 ID。之后，我们使用 clone 调用 document.body.appendChild 来增加主体。
<!DOCTYPE html> <html> <title>CloneNode() method in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <div id='tutpoint'> Learn coding with tutorialspoint by sitting everywhere </div> <script> const div = document.getElementById('tutpoint') const cloneDiv = div.cloneNode(true); cloneDiv.id = "tutpoint1"; document.body.appendChild(cloneDiv); </script> </body> </html>
