Autor Tema: JavaScript cloneNode removeChild duplicar div al hacer click Ejercicio CU01141E (Leído 1974 veces)

paramonso · « **en:** 27 de Octubre 2017, 19:18 »

Hola. Dejo el ejercicio : CU01141E javascript cloneNode removeChild replaceChild insertbefore del tutorial pdf de programación JavaScript.

Código inicial mostrado en el ejercicio:

Código: [Seleccionar]

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

1) ¿Por qué no funciona?
var nodoHijo = nodoPadre;

No funciona porque en este codigo solo se crea una variable igual a nodoPadre y no se crea un nuevo elemento para poder añadirlo al código HTML.
Lo único que hace es cambiar el nombre del nodo o mejor dicho tener el mismo nodo con dos nombres.

Como dice Pandemia en la respuesta al ejercicio 1 no es que se cree un nuevo div y se superponga, solamente se renombra al crear una nueva variable.
y lo podemos comprobar con la linea de codigo que el nos deja pusiendo nodoHijo.style.backgroundColor="yellow"; y comprobando que cambia de color el fondo,
luego cambiamos esa misma linea de codigo con nodoPadre.style.backgroundColor="red"; y nos vuelve a cambiar de color el fondo del mismo Nodo no de un Nodo Nuevo.

Eso se puede apreciar añadiendo este codigo :
var nodoGijo = document.createElement("div");
var nodoHijo = nodoPadre;
nodoPadre.appendChild(nodoGijo);
//nodoHijo.appendChild(nodoGijo);
//document.body.appendChild(nodoHijo);
Se quitan las barras de comentarios y se comprueba que las dos sentencias hacen lo mismo.

document.body.appendChild(nodoHijo);

En las segunda secuencia de código el nodo no se puede agregar ya que no se ha creado y puesto que no se ha creado no existe y no hay nada que agregar.
Y se añade con una referencia fuera del Nodo desde donde se hace la llamada con this.
No he probado otras cosas pero creo que es por eso.

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.

Código 2:

Código: [Seleccionar]

<!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">
	var contador=1; 
function crearNodoHijo(nodoPadre) {
var nodoHijo = document.createElement("div");
var nodoTexto = document.createTextNode(nodoPadre.firstChild.nodeValue+"  "+contador);
 nodoHijo.className = 'nodoHijo';
nodoHijo.appendChild(nodoTexto);
nodoPadre.appendChild(nodoHijo);
contador++;
}
 
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
<div id ="atras" onclick="clonarNodo(document.querySelector('#nodoRaiz'))"> Clonar </div>
</body></html>

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.

Código 3)

Código: [Seleccionar]


<!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">
var  cont=1;
 
function clonarNodo() {

                var nodosHijos = document.querySelectorAll('#nodoRaiz');
                var nodoPadre = document.querySelector('#nodoRaiz');
                 
                var tmpNodo = nodosHijos[0].cloneNode(false);
                nodoPadre.appendChild(tmpNodo);
                var nodoTexto = document.createTextNode(nodoPadre.firstChild.nodeValue+" Clonado  "+cont);
                tmpNodo.appendChild(nodoTexto);
                 cont=cont+1
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
<div id ="atras" onclick="clonarNodo(document.querySelector('#nodoRaiz'))"> Clonar </div>
</body></html>

Ogramar · « **Respuesta #1 en:** 06 de Febrero 2018, 21:45 »

Buenas, los apartados 1 y 2 los veo correctos. El ejercicio 3 aunque duplica el nodo cada vez que se pulsa en "Clonar" diría que no cumple con lo que pedía el ejercicio porque supuestamente debería clonarse el nodo al pulsar en el propio nodo, es decir, al pulsar en "Pulsa aquí para duplicar este nodo" y no al pulsar en el botón clonar. Es un detalle para adaptar la respuesta a lo que pedía concretamente el enunciado del ejercicio simplemente.

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: