Clonar varios elementos y mostrarlos

[Nerissa17]

Hola,

Estoy teniendo varios problemas con el codigo porque a veces consigo clonar los elementos pero no se me muestran o viceversa.
Lo que yo quiero es clonar todos los elementos de un div y mostrarlos en el body,pero si pongo el nombre de donde he sacado los elementos solo me muestra eso.... alguna idea?
Aqui esta el codigo que estoy usando:

Código Javascript:

$(document).ready(function(){
 
    var pictures0_1 = document.createElement("div");
    pictures0_1.id = "pictures0_1";
    $("#pictures0").clone().appendTo("#pictures0_1");
    $("#pictures:first").appendTo("#pictures:second");
    $("#pictures0").remove();
        // Con este prepend me muestra el codigo que quiero,pero yo no quiero tener que escribir el codigo porque la idea es que el solo coja el codigo que quiero mostrar con el clone,sin tener que escribirselo
    $("#pictures2").prepend("<div id='pictures0_1'><img class='type1' src='pictures/pic2.jpg' /><img class='type1' src='pictures/pic3.jpg' /><img class='type1' src='pictures/pic4.jpg' /></div>");
 
});
 

Y este es el div del body que quiero clonar:

Código HTML:

<div id="pictures0">
        <img class="type1" src="pictures/pic2.jpg" />
        <img class="type1" src="pictures/pic3.jpg" />
        <img class="type1" src="pictures/pic4.jpg" />
    </div>
 

Realmente me da igual usar javascript o jquery,pero como puedo elegir creo que seria mas sencillo y rapido por el jquery,pero si se os ocurre una solucion con javascript tambien me vale!

Gracias por pasaros!

[Alexis88]

En JavaScript existe el método cloneNode, el cual realiza lo mismo que el método clone de jQuery.

Código Javascript:

var clonar = function(elemento, id){
        var nuevo = elemento.cloneNode(true);
        nuevo.id = id;
        document.body.appendChild(nuevo);  
    };
 
clonar(document.getElementById("pictures0"), "pictures0_1");
 

El parámetro booleano true se coloca para indicarle al método que debe de clonar tanto al elemento en cuestión como a su contenido. Los argumentos a enviar a la función son el elemento a clonar y el id que deseas asignar al elemento clonado, de este modo, puedes reutilizar la función cuantas veces quieras.

Saludos

[zerokilled]

buenas...
hablando desde mi ignorancia en jquery, seguramente estás usando mal el jquery. por lo que puedo interpretar, el código hace esto:
· crear un elemento DIV con ID #pictures0_1
· clonas el DIV #pictures0 y se lo agregas al elemento #pictures0_1
· agregas la primera coincidencia (:first) del elemento #pictures a la segunda coincidencia (:second) de #picutres. con esto se entiende que en el html existe mas de un #picturesX_X
· y finalmente tienes un prepend con un código html.

cuando haces clone, estas clonando el elemento perse junto con su contenido. no entiendo que exactamente quieres clonar, si todos los #picturesX o uno en particular. en todo caso, en puro js, harías algo asi:

Código:

document.body.appendChild( // agregar al final del BODY;
document.getElementById("pictures0").cloneNode(true) // true para clonar tambien los elementos hijos del principal;
);