Solución del ejercicio CU01141E del curso JavaScript desde cero.
Código primario (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> 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?
1) Realmente, tal y como tenemos el código, lo que hace es sustituir el nodoPadre por el nodoPadre. Visualmente no se ve ningún cambio porque los dos div son idénticos y el nodoHijo se sobrepone al nodoPadre. Podrías ver que funciona el código incluyendo la siguiente línea:
nodoHijo.style.backgroundColor="yellow";de modo que el código nos quedaría de la siguiente manera:
<!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>Por lo tanto, podemos concluir que sí funciona el código pero no de la manera que nos gustaría.
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.
2) El código de la segunda condición quedaría así:
<!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 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.
3) El código del subpunto 3 sería así:
<!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>Gracias
Tema: JavaScript clonenode DOM appendChild document.createElement('div') CU01141E# (Leído 2178 veces)
RSS -
WAP2