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: bermartinv en 04 de Febrero 2016, 13:23
-
1) El código sí funciona pero no hace lo que queremos. La opción de copiar un elemento lo que hace es cojerlo de un sitio y ponerlo en otro. Por lo que si lo que queremos es tener dos elementos no funciona, para eso tnemos cloneNode.
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 nodoHijo=document.createElement("div");
nodoHijo.innerHTML=nodoPadre.innerHTML;
nodoHijo.onclick=function (){crearNodoHijo(nodoPadre)};
nodoHijo.style.color="blue";
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>
3)<!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(false);
nodoHijo.innerHTML=nodoPadre.innerHTML;
nodoHijo.onclick="";
document.body.appendChild(nodoHijo);
nodoHijo.style.color="blue";
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>
-
Buenas bermartinv
1) He probado el código en dos navegadores y no hace nada ¿A tí te hace algo? ¿Con qué navegador? ¿Qué es lo que observas que hace al hacer click?
2) Lo veo bien resuelto
3) También lo veo bien resuelto
Una curiosidad es que el código 2 y el código 3 no responden igual, es decir, con el código 2 si pulsamos sobre un nodo hijo se añade un nuevo hijo, en cambio con el código 3 si pulsamos sobre un hijo no se añade un hijo (esto sólo lo logramos pulsando sobre el nodo inicial).
Salu2
-
Gracias Ogramar, por tus respuestas.
Sobre la pregunta a) no me he explicado bien. Quería decir que no clona si no que se hace una copia pero desaperece de donde se encuentra y se coloca al final de body. No realiza lo que queremos hacer que era clonar un nodo pero no es incorrecto el código.
<!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>
<p>Hola que tal</p>
</body></html
Sobre mis soluciones de b) y C) lo he hecho así para contrastar una apartado y otro.
Saludos.