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>
Tema: JavaScript cómo duplicar un nodo del DOM cloneNode, removeChild... CU01141E (Leído 2100 veces)
RSS -
WAP2