HTML | Método DOM cloneNode()

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

Publicación traducida automáticamente

Artículo escrito por Abhishek7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *