El método DOM cloneNode() se usa para copiar o clonar un Node en el que se llama al método cloneNode(). Por ejemplo, un elemento de lista se puede copiar de una lista a otra utilizando este método.
Sintaxis:
yourNode.cloneNode([deep])
El [profundo] es un argumento opcional. Podemos establecer su valor en «verdadero» si queremos copiar el Node junto con sus atributos y Nodes secundarios y «falso» si queremos copiar solo el Node y sus atributos.
Nota: si no especificamos ningún argumento, entonces el valor de [profundo] se toma como verdadero por defecto.
Ejemplo 1:
html
<!DOCTYPE html> <html> <head> <title>HTML|DOM cloneNode() Method</title> <!-- Set CSS property to the element --> <style> h1, h2 { color: green; } </style> </head> <body style="text-align: center;"> <div style="border:3px solid green"> <h1> GeeksforGeeks </h1> <h2> A computer science portal for geeks </h2> </div> <button onclick="nClone()"> Click here to clone the above elements. </button> <!-- nClone() function is used to fetch our node and apply cloneNode method on it and cloning it with another element--> <script> function nClone() { // accessing div attribute using a //variable geek var geek = document.getElementsByTagName("DIV")[0]; // cloning geek variable into a variable //named clone var clone = geek.cloneNode(true); // adding our clone variable to end //of the document document.body.appendChild(clone); } </script> </body> </html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2:
html
<!DOCTYPE html> <html> <head> <title>HTML|DOM cloneNode() Method</title> <!-- Set CSS property to the element --> <style> h1, h2 { color: green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> A computer science portal for geeks</h2> <ul id="list1"><li>Geek1</li><li>Geek2</li></ul> <ul id="list2"><li>Geek3</li><li>Geek4</li></ul> <button onclick="clone()">Try it</button> <script> function clone() { // accessing list2 last item and storing it in a variable "geek" var listItem = document.getElementById("list2").lastChild; // cloning listItem variable into a variable named clone var clone = listItem.cloneNode(true); // adding our clone variable to end of the list1. document.getElementById("list1").appendChild(clone); } </script> </body> </html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegador compatible: los navegadores compatibles con el método DOM cloneNode() se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 6 y superior
- Firefox 1 y superior
- Ópera 7 y superior
- Safari 1.1 y superior