Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: JuansT en 01 de Febrero 2017, 00:48
-
Ejercicio CU01141E del tutorial de programación web con JavaScript:
1) Me ha costado identificarlo pero creo que por fin lo entendí, al tener esto:
var nodoHijo = nodoPadre;
document.body.appendChild(nodoHijo);
Al principio pensaba que appendChild creaba un espacio en el body para meter el nodoHijo, pero si fuera así habría metido a nodoHijo como un nodo nuevo y hubiera funcionado correcto, pero creo que al hacer la igualdad en la primera linea, tanto nodoHijo como nodoPadre actúan como "punteros", es decir, parece que apuntaran al mismo sitio, y appendChild hace como de apuntador entre body y ese nodo, es por eso que nodoPadre desaparece y lo reemplaza por nodoHijo, por que apuntan al mismo sitio, en cambio al hacer un cloneNode lo que haces es crear un nuevo "puntero" y así appendChild sí podrá apuntar a nodoHijo sin cargarse nodoPadre, ya que son distintos "punteros".
digo punteros y seguro que no es así, pero es la única manera que se me ocurre de describir y entender esto.
2) <!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 nodoDiv = document.createElement("div");
var nodoTxt = document.createTextNode("Pulsa aquí para duplicar este nodo");
nodoDiv.onclick = nodoPadre.onclick;
nodoDiv.className = "nodoNuevo";
nodoDiv.appendChild(nodoTxt);
document.body.appendChild(nodoDiv);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>
3)
cambiando "var nodoHijo = nodoPadre;" por var nodoHijo = nodoPadre.cloneNode(true); creo que resuelve este apartado, ya que appendChild vincula el nuevo nodo al final del Body y por eso creo que no hace falta añadir nada más, quedando 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>
-
1) Mira la definicion de 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.
Pero tu respuesta es la correcta
Para los otros dos apartados están bien resueltos y destacar lo fácil que se hace con cloneNode, a través del apartado b y c se puede ver como se trabaja mejor.
Saludos
-
No recordaba esa característica del cloneNode, gracias!!