JavaScript clonenode (duplicar o copiar nodos), removechild, replacechild, insertbefore. Ejemplos (CU01141E)

Resumen: Entrega nº41 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01141E

 

 

MÁS ACCIONES SOBRE NODOS DEL DOM

JavaScript ofrece algunas posibilidades adicionales de actuar sobre nodos del DOM. En este caso vamos a ver una variante de appendChild denominada insertBefore, un método para clonar nodos denominado cloneNode, y los métodos para eliminar y reemplazar nodos removeChild y replaceChild.

logo javascript

 

INSERTBEFORE

Además de usar appendChild, que nos permite añadir un nodo como nodo hijo del nodo especificado con la sintaxis nombreNodoPadre.appendChild(nombreNodoHijo); tenemos otra opción para insertar un nodo en un documento HTML (página web): el método insertBefore. La sintaxis a emplear normalmente es de este tipo:

nodoQueSeráPadreDelNuevoNodo.insertBefore(nuevoNodo, nodoAntesDelQueHaremosLaInserción);

 

 

Escribe el siguiente código, guárdalo con extensión html y visualiza los resultados en tu navegador. El resultado esperado es que inicialmente aparece un formulario donde se pide nombre, apellidos y correo electrónico. Se nos da opción a pulsar en un enlace para poder añadir otra persona al formulario y cuando lo hacemos nos aparecen las casillas para la persona adicional (tantas personas como queramos) debido a que estamos insertando un nuevo nodo con las nuevas casillas.

Analiza el código y trata de razonar sobre algunos detalles, por ejemplo cuál es el papel de <div id="referenciaVacia1"></div>. Si tienes dudas consulta en los foros aprenderaprogramar.com.

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css">

body {background-color:yellow; font-family: sans-serif;}

label {color: maroon; display:block; padding:5px;}

.simulaLink {color: blue; cursor:pointer;}

</style>

<script type="text/javascript">

var contador = 1;

function addPersona () {

var nodoForm = document.querySelector('form');

var nuevoNodo = document.createElement('div');

contador = contador+1;

nuevoNodo.innerHTML = '<label for="nombre'+contador+'"><span>Nombre persona '+contador+':</span> <input id="nombre'+contador+

'" type="text" name="nombre'+contador+'" /></label>'+

'<label for="apellidos'+contador+'"><span>Apellidos persona '+contador+':</span> <input id="apellidos'+contador+

'" type="text" name="apellidos'+contador+'" /></label>'+

'<label for="email'+contador+'"><span>Correo electrónico persona '+contador+':</span> <input id="email"'+contador+

' type="text" name="email'+contador+'" /></label>'+

'<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>';

nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#referenciaVacia1'));

}

</script>

</head>

<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2></div>

<!-- Formulario de contacto -->

<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Indica los datos de la persona que se apunta al curso:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>

<p>Si quieres apuntar simultáneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa aquí</span></p>

<div id="referenciaVacia1"></div>

<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>

</form></body></html>

 

 

DUPLICAR NODOS EN EL DOCUMENTO HTML. CLONENODE

Si estamos trabajando con un documento HTML (página web) y tratamos de reinsertar un nodo ya existente, el resultado no será que se genere una copia del nodo a insertar en la nueva posición, sino que en primer lugar se eliminará el nodo automáticamente de su posición inicial y se insertará en la nueva posición designada.

¿Cómo podemos entonces añadir exactamente el mismo nodo (una copia) en otra posición del documento HTML?

Para ello disponemos del método cloneNode. La sintaxis a emplear normalmente es de este tipo:

var nodoNuevoCopia = nodoACopiar.cloneNode(valorBooleano);

 

 

Donde valorBooleano es un parámetro que se le pasa al método que en caso de valer true supone que se clonará el nodo a copiar con todos sus descendientes (copia completa) y en caso de valer false supone que se clonará el nodo sin sus descendientes (copia simple).

El ejercicio propuesto más adelante incluye un ejemplo de uso de cloneNode.

 

 

ELIMINAR NODOS EN EL DOCUMENTO HTML CON REMOVECHILD

El método removeChild elimina un nodo y todos sus descendientes. La sintaxis para emplearlo es:

nodoPadre.removeChild(nodoHijo);

 

 

Donde nodoPadre es el nodo padre del nodo que queremos eliminar, y nodoHijo el nodo a eliminar (junto a todos sus descendientes).

Una forma habitual de acceder al nodo padre es usar la invocación nodoHijo.parentNode. Por ejemplo:

nodoAEliminar.parentNode.removeChild(nodoAEliminar);

Nos permite acceder al nodo padre del que queremos eliminar e invocar sobre él removeChild.

Crea un documento html con el siguiente código y comprueba cómo se pueden añadir nodos con appendChild y eliminar nodos con removeChild pulsando un botón “añadir” o “eliminar”.

<!DOCTYPE html>

<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css">

body {font-family: sans-serif; text-align:center; }

#nodoRaiz {border-style:solid;margin: 30px; padding:25px; display:inline-block;}

.nodoHijo {background-color: yellow; border-style:solid;margin: 20px; padding:15px; display:inline-block;}

#contenedor {width:405px;margin: 0 auto;}

#adelante, #atras {padding:15px; width: 130px; float: left; margin-left:20px;

color: white; border-radius: 40px; background: rgb(202, 60, 60);}

#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}

</style>

<script type="text/javascript">

var contador = 1

function crearNodoHijo(nodoPadre) {

                var nodoHijo = document.createElement("div");

                var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);

                nodoHijo.className = 'nodoHijo'; nodoHijo.appendChild(nodoTexto); nodoPadre.appendChild(nodoHijo);

                contador = contador +1;

}

function removeNodo() {

                var nodosEliminar = document.querySelectorAll('.nodoHijo');

                if (nodosEliminar.length>0) { //Si hay nodos que se puedan eliminar

                var nodoAEliminar = nodosEliminar[nodosEliminar.length-1]; //Acceso al último nodo hijo

                nodoAEliminar.parentNode.removeChild(nodoAEliminar);

                contador = contador -1;

                }

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo(this)">Contenido inicial es este texto</div>

<div id="contenedor">

<div id ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Añadir </div>

<div id="adelante" onclick="removeNodo()" > Eliminar </div>

</div></body></html>

 


REEMPLAZAR UN NODO CON REPLACECHILD

El método replaceChild permite eliminar un nodo y reemplazarlo por otro. La sintaxis para emplearlo es:

nodoPadre.replaceChild(nuevoNodo, nodoQueSeráReemplazado);

 

 

Donde nuevoNodo es el nodo que vamos a insertar para reemplazar al nodo que hemos denominado nodoQueSeráReemplazado.

Si nuevoNodo ya existe en el DOM, primero será eliminado del lugar en que ya existía y luego será insertado en el lugar indicado. El nodo reemplazado es eliminado en todo caso.

Crea un documento html con el siguiente código y comprueba cómo se puede reemplazar el primer nodo de una serie por el último usando replaceChild.

<!DOCTYPE html>

<html>

<head> <title>Curso JavaScript aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

body {font-family: sans-serif; text-align:center; }

#nodoRaiz {border-style:solid;margin: 30px; padding:25px; display:inline-block;}

.nodoHijo {background-color: yellow; border-style:solid;margin: 20px; padding:15px; display:inline-block;}

#contenedor {width:405px;margin: 0 auto;}

#adelante, #atras {padding:15px; width: 130px; float: left; margin-left:20px;

color: white; border-radius: 40px; background: rgb(202, 60, 60);}

#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}

</style>

<script type="text/javascript">

var contador = 1

function crearNodoHijo(nodoPadre) {

                var nodoHijo = document.createElement("div");

                var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);

                nodoHijo.className = 'nodoHijo';

                nodoHijo.appendChild(nodoTexto);

                nodoPadre.appendChild(nodoHijo);

                contador = contador +1;

}

function cambiarNodo() {

                var nodosHijos = document.querySelectorAll('.nodoHijo');

                var nodoPadre = document.querySelector('#nodoRaiz');

                if (nodosHijos.length>1) { //Si hay nodos que se puedan cambiar

                var tmpNodo = nodosHijos[0].cloneNode(true);

                nodoPadre.replaceChild(nodosHijos[nodosHijos.length-1], nodosHijos[0]);

                nodoPadre.appendChild(tmpNodo);

                }

}

</script>

</head>

<body>

<div id="nodoRaiz">

Contenido inicial es este texto

</div>

<div id="contenedor">

<div id ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Añadir </div>

<div id="adelante" onclick="cambiarNodo()" > Cambiar </div>

</div>

</body>

</html>

 

 

Fíjate cómo el primer nodo de la serie de hijos lo clonamos para después de ser reemplazado por el último, poder insertar el clon en la posición final.

 

 

EJERCICIO

El siguiente código pretendía duplicar un nodo cada vez que se pulsara sobre él, de modo que inicialmente apareciera en pantalla el mensaje “Pulsa aquí para duplicar este nodo” y que cada vez que se pulsara sobre él, se duplicara (tantas veces como veces se pulsara). El problema es que no funciona, es decir, no obtenemos ningún resultado. Analiza el código y responde estas cuestiones:

1) ¿Por qué no funciona?

2) Realiza los cambios en el código que nos permitan realizar lo que teníamos previsto creando un nuevo nodo del mismo tipo y con el mismo texto que el deseado y añadiéndolo como último hijo del nodo body.

3) Realiza los cambios en el código que nos permitan realizar lo que teníamos previsto clonando el nodo con el método cloneNode y añadiendo el nodo clonado como último hijo del nodo body.

<!DOCTYPE html>

<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css">

body {font-family: sans-serif; text-align:center; }

div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}

div div {background-color: yellow;}

</style>

<script type="text/javascript">

function crearNodoHijo(nodoPadre) {

var nodoHijo = nodoPadre;

document.body.appendChild(nodoHijo);

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>

</body></html>

 

 

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación