buenas amigos aquí dejo unas posibles respuestas a los ejercicios de la entrega CU01141E del curso de programador web con JavaScript......
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:
Ejercicio inicial<!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?Tal y como esta el código lo único que hace es sustituir el nodoPadre por el nodoPadre, y visualmente no hay ningún cambio, porque se sobreponen los div, sinenbargo si le aplicamos una linea de código poniendo un stylo de color de fondo vemos que el código sí funciona; pero no a nuestro gusto
nodoHijo.style.backgroundColor="yellow";Nuevo código con el cambio indicado
<!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;
nodoHijo.style.backgroundColor="yellow";
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body>
</html>
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.
<!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 nodoBox = document.createElement("div");
var nodoTexto = document.createTextNode("Pulsa aquí para duplicar este nodo");
nodoBox.onclick = nodoPadre.onclick;
nodoBox.className = "nodoNuevo";
nodoBox.appendChild(nodoTexto);
document.body.appendChild(nodoBox);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">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.
<!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.cloneNode(true);
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body>
</html>
Saludos y gracias a todos de antemano.......
Tema: JavaScript clonenode (duplicar o copiar nodos del DOM), removechild CU01141E (Leído 1941 veces)
RSS -
WAP2