É possível clonar objetos de elemento html em JavaScript / JQuery?

100

Estou procurando algumas dicas de como resolver meu problema.

Eu tenho um elemento html (como o campo de entrada da caixa de seleção) em uma tabela. Agora quero copiar o objeto e gerar um novo a partir da cópia, e isso com JavaScript ou jQuery. Eu acho que isso deve funcionar de alguma forma, mas estou um pouco sem noção no momento.

Algo assim (pseudocódigo):

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

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

— Richard
fonte

3

stackoverflow.com/search?q=jquery+copy+element+content tem um monte de perguntas relacionadas.

— Felix Kling

60

Usando seu código, você pode fazer algo assim em JavaScript simples usando o 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 );

Ou usando o método jQuery clone () (não o mais eficiente):

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

— Boris Guéry
fonte

30

É MUITO importante modificar o ID ao clonar um elemento.

— Dragos Durlut,

284

Com JavaScript nativo:

newelement = element.cloneNode(bool)

onde o booleano indica se é para clonar nós filhos ou não.

Aqui está a documentação completa sobre MDN .

— Annakata
fonte

50

melhor resposta. não use jquery onde você não precisa.

— luschn

Parece bom ... mas a compatibilidade do navegador é questionável a partir de hoje.

— Aniket Suryavanshi

13

@AniketSuryavanshi Não tenho certeza sobre 4 de fevereiro em particular, mas a compatibilidade parece perfeita hoje

2

IDs e nomes serão duplicados. Os IDs PRECISAM ser alterados, os nomes PODEM ser deixados como estão se forem esperados nomes duplicados.

— przemo_li

É uma pena que você perca todos os atributos: /

— Pieter De Bie

16

Sim, você pode copiar os filhos de um elemento e colá-los no outro elemento:

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

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

Prova: http://jsfiddle.net/de9kc/

— Tadeck
fonte

IDs duplicados serão um problema com sua abordagem

— przemo_li

4

Na verdade, é muito fácil no jQuery:

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

Altere .appendTo () é claro ...

— Philippe Leybaert
fonte

2

Você pode usar o método clone () para criar uma cópia.

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

FIDDLE AQUI

— Sushanth -
fonte

1

Experimente isto:

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

— Oscar Jara
fonte

0

Em uma linha:

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

— Tamas Czinege
fonte

1

Não acho que isso vá ajudar, pois o valor do seu atributo é uma string que não muda.

— Jamie R Rytlewski

0

Você precisa selecionar "# foo2" como seu seletor. Então, pegue com html ().

Aqui está o html:

<div id="foo1">

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

Aqui está o javascript:

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

Aqui está o jsfiddle: http://jsfiddle.net/fritzdenim/DhCjf/

— Franz Noel
fonte