Autor Tema: JavaScript y HTML crear y copiar nodos del DOM cloneNode appendChild CU01141E (Leído 3462 veces)

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)

Código: [Seleccionar]

 <!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)

Código: [Seleccionar]

<!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>

Ogramar · « **Respuesta #1 en:** 06 de Febrero 2016, 14:51 »

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

bermartinv · « **Respuesta #2 en:** 08 de Febrero 2016, 00:44 »

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.

Código: [Seleccionar]

 <!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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: