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