¿Es posible clonar objetos de elementos html en JavaScript/JQuery?

Question

Estoy buscando algunos consejos sobre cómo resolver mi problema.

Tengo un elemento html (como el campo de entrada Seleccionar cuadro) en una tabla. Ahora quiero copiar el objeto y generar uno nuevo de la copia, y eso con JavaScript o jQuery. Creo que esto debería funcionar de alguna manera, pero estoy un poco despistado en este momento.

Algo como esto (pseudo código):

Answer 1

La forma jQuery (no el más eficiente):

mirada en el método de jQuery

clone() Usando el código que puede hacer algo así:

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want 

Answer 2

De hecho, es muy fácil en jQu ery:

$("#ddl_1").clone().attr("id",newId).appendTo("body"); 

Cambio .appendTo() por supuesto ...

Answer 3

En una línea:

$('#selector').clone().attr('id','newid').appendTo('#newPlace'); 

Answer 4

con javascript orígenes:

newelement = element.cloneNode(bool) 

donde el booleano indica si para clonar nodos secundarios o no

Answer 5

Sí, puede copiar los niños de uno de los elementos y pegarlos en el otro elemento:

var foo1 = jQuery('#foo1'); 
var foo2 = jQuery('#foo2'); 

foo1.html(foo2.children().clone()); 

Prueba: http://jsfiddle.net/de9kc/

Answer 6

Prueba esto:

$('#foo1').html($('#foo2').children().clone()); 

Answer 7

Es necesario seleccionar "# foo2" como tu selector. Luego, consíguelo con html().

Aquí es el html:

<div id="foo1"> 

</div> 
<div id="foo2"> 
    <div>Foo Here</div> 
</div>​ 

Aquí está el javascript:

$("#foo2").click(function() { 
    //alert("clicked"); 
    var value=$(this).html(); 
    $("#foo1").html(value); 
});​ 

Aquí está el jsFiddle: http://jsfiddle.net/fritzdenim/DhCjf/

Answer 8

Puede utilizar clone() método para crear una copia ..

$('#foo1').html($('#foo2 > div').clone())​; 

FIDDLE HERE