Hola en relación al ejercicio propuesto en la entrega CU01141E del curso de programador web Javascript para dummies.
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?
Hay varias deficiencias en el código. Primero la propuesta da a la var nodoHijo = nodoPadre; Y esto es un error y una contradicción que no dejará funcionar el código.
Después hay que escribir una sintaxis por ejemplo, creatElement para poder crear unnuevo nodo.
Otro error es que se asocia nodoPadre con "this" haciendo este último alusión al div con id = nodoRaiz.. y nosotros en realidad queremos alojar el nuevo nodo en el body directaente y no en el div raiz.
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.
La primera solución para el ejercicio sin utilizar cloneNode sería la siguiente
<!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() {
var nodoAlpha = document.querySelector('#nodoRaiz');
var nodoHijo = document.createElement('div');
var nodoTexto = document.createTextNode('Pulsa aquí para duplicar este nodo');
nodoHijo.onclick = function() {crearNodoHijo()};
nodoHijo.appendChild(nodoTexto);
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo()">Pulsa aquí para duplicar este nodo</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.
Y más fácil sería utilizando cloneNode por ejemplo:
<!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() {
var nodoAlpha = document.querySelector('#nodoRaiz');
var nodoHijo = nodoAlpha.cloneNode(true);
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo()">Pulsa aquí para duplicar este nodo</div>
</body></html>Hasta aquí mi solución.. si hay alguna mejor de hacerlo me encantaría aprender a resolverlo mejor.
Tema: JavaScript clonenode removechild, replacechild, insertbefore. Ejercicio CU01141E (Leído 3255 veces)
RSS -
WAP2