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.

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">

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

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

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

</style>

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>

<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>

</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">

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>

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 ="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>

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>

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>

Contenido inicial es este texto

</div>

<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">

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>

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.

Descargar archivo:

Download
CU01141E javascript cloneNode removeChild replaceChild insertbefore ejemplos.pdf	100 Kb

Remitidos

Editar y personalizar archivos pdf profesionalmente. Hazlo con Lumin PDF.
Posicionamiento SEO y mejora de resultados en buscadores. Crea tu página web.
¿Conexión a internet para creación de videojuegos? Utiliza Optimum.
Crear logotipos profesionales para empresas. Turbologo, tu herramienta online.
Importancia de las matemáticas en la programación. Conoce sus ventajas.
Análisis de datos en plataformas over-the-top (OTT). Cómo mejorar rendimientos.
Powerpoint, Excel, Word. Conseguir una licencia Office 2021 legal y barata.

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

Codificación aprenderaprogramar.com: CU01141E

En Facebook!

Remitidos

Política sobre cookies

RANKING APR2+

FOROS APR2+

Lo más leído

Donar o colaborar

¿Puedo yo aprender?