¿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();
javascript jquery clone elements Ricardo
fuente
3
stackoverflow.com/search?q=jquery+copy+element+content tiene un montón de preguntas relacionadas.
Felix Kling

Respuestas:

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