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

Estoy buscando algunos consejos sobre cómo resolver mi problema.¿Es posible clonar objetos de elementos html en JavaScript/JQuery?

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

Fuente

2009-05-28 Richard

http://stackoverflow.com/search?q=jquery+copy+element+content tiene un montón de preguntas relacionadas. –

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

Fuente

2009-05-28 14:59:21

+22

Es MUY importante modificar la ID cuando se clona un elemento. –

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

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

Cambio .appendTo() por supuesto ...

Fuente

2009-05-28 15:00:16

+1 ¡me ganas! –

En una línea:

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

Fuente

2009-05-28 15:01:08

No creo que eso ayude ya que el valor de su atributo es una cadena que no cambiará. –

238

con javascript orígenes:

newelement = element.cloneNode(bool)

donde el booleano indica si para clonar nodos secundarios o no

Fuente

2009-05-28 15:01:18 annakata

+33

mejor respuesta. no use jquery donde no lo necesite. – luschn

Se ve bien ... pero la compatibilidad del navegador es cuestionable a partir de hoy. –

+11

@AniketSuryavanshi No estoy seguro acerca del 4 de febrero en particular, pero [la compatibilidad parece perfecta hoy] (http://quirksmode.org/dom/core/#t91) –

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/

Fuente

2012-09-28 00:23:22 Tadeck

Las identificaciones duplicadas serán un problema con su enfoque –

Prueba esto:

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

Fuente

2012-09-28 00:30:27

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/

Fuente

2012-09-28 00:33:37

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

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

FIDDLE HERE

Fuente

2012-09-28 00:45:18

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

Respuesta

Cuestiones relacionadas