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

100

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

Tengo un elemento html (como el campo de entrada del cuadro de selección) en una tabla. Ahora quiero copiar el objeto y generar uno nuevo a partir de la copia, y eso con JavaScript o jQuery. Creo que esto debería funcionar de alguna manera, pero de momento no tengo ni idea.

Algo como esto (pseudo código):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

— Ricardo
fuente

3

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

— Felix Kling

60

Usando su código, puede hacer algo como esto en JavaScript simple usando el método cloneNode () :

// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

O usando el método jQuery clone () (no es el más eficiente):

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

— Boris Guéry
fuente

30

Es MUY importante modificar el ID cuando clona un elemento.

— Dragos Durlut

285

Con JavaScript nativo:

newelement = element.cloneNode(bool)

donde el booleano indica si clonar nodos secundarios o no.

Aquí está la documentación completa sobre MDN .

— Annakata
fuente

50

la mejor respuesta. no use jquery donde no lo necesite.

— luschn

Se ve bien ... pero la compatibilidad del navegador es cuestionable a día de hoy.

— Aniket Suryavanshi

13

@AniketSuryavanshi No estoy seguro sobre el 4 de febrero en particular, pero la compatibilidad parece perfecta hoy

2

Se duplicarán las identificaciones y los nombres. Los ID DEBEN cambiarse, los nombres PODRÍAN dejarse como están si se esperan nombres duplicados.

— przemo_li

Lástima que pierda todos los atributos: /

— Pieter De Bie

16

Sí, puede copiar elementos secundarios de un elemento y pegarlos en el otro elemento:

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

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

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

— Tadeck
fuente

Las ID duplicadas serán un problema con su enfoque

— przemo_li

4

En realidad, es muy fácil en jQuery:

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

Cambiar .appendTo () por supuesto ...

— Philippe Leybaert
fuente

2

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

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

TOCAR AQUÍ

— Sushanth -
fuente

1

Prueba esto:

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

— Oscar Jara
fuente

0

En una línea:

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

— Tamas Czinege
fuente

1

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

— Jamie R Rytlewski

0

Debe seleccionar "# foo2" como su selector. Luego, consígalo con html ().

Aquí está 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/

— Franz Noel
fuente