Como mover um elemento para outro elemento?

1689

Eu gostaria de mover um elemento DIV para dentro de outro. Por exemplo, eu quero mover isso (incluindo todos os filhos):

<div id="source">
...
</div>

nisso:

<div id="destination">
...
</div>

para que eu tenha isso:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

javascript jquery html Mark Richman
fonte

21

Basta usar $ (target_element) .append (to_be_inserted_element);

Mohammad Areeb Siddiqui

2

Ou: destination.appendChild (origem) usando javascript simples

luke

podemos conseguir isso usando CSS? isso é possível ?

RajKumar Samala

6

O @RajKumarSamala CSS não pode alterar a estrutura do HTML, apenas sua apresentação.

Mark Richman

39

Já tentou JavaScript simples ... destination.appendChild(source);?

onclick = function(){ destination.appendChild(source); }

div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }

<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

Expandir snippet

Bekim Bacaj
fonte

* alguém prefixou o evento global onclick do snippet de demonstração com a palavra-chave varem sua tentativa de aprimorar a publicação - mas isso está errado!

Bekim Bacaj

6

É incrível como as pessoas ainda pensam que jQuery é igual a JavaScript. Não há mais necessidade de jQuery em 2017, realmente.

Nckollaw

2

não há necessidade de jquery em 2017, mas às vezes ajuda a usar algo mais leve e semelhante para tarefas que você se encontra fazendo repetidas vezes em cada projeto. Eu uso o cash-dom como uma maneira fácil de escutar os eventos document.ready, window.load de uma maneira amigável entre navegadores. mole-mole.

eballeste

1

Alterando isso para a resposta aceita, agora que é 2020 :)

Mark Richman

1

É incrível como as pessoas ainda pensam que jQuery é igual a JavaScript. Não há mais necessidade de jQuery em 2020, realmente.

ii iml0sto1 23/04

1794

Você pode querer usar a appendTofunção (que adiciona ao final do elemento):

$("#source").appendTo("#destination");

Como alternativa, você pode usar a prependTofunção (que adiciona ao início do elemento):

$("#source").prependTo("#destination");

Exemplo:

Mostrar snippet de código

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

Expandir snippet

Andrew Hare
fonte

23

Um aviso de que isso pode não funcionar corretamente no jQuery mobile, pois pode criar outra cópia do elemento.

Jordan Reiter

32

o appenTo cria uma cópia ou realmente move toda a div para o destino? (porque se copia, criaria Erros ao chamar o div pela id)

50

Aqui está um excelente artigo sobre como remover, substituir e mover elementos no jQuery: elated.com/articles/jquery-removing-replacing-moving-elements

xhh

42

Observe a documentação do jQuery para os estados appendTo em que o elemento é movido: it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned- api.jquery.com/appendto

John K

15

Você não está movendo, apenas anexando. A resposta abaixo faz um bom MOVIMENTO.

Aaron

913

minha solução:

MOVER:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

CÓPIA DE:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

Observe o uso de .detach (). Ao copiar, tenha cuidado para não duplicar IDs.

Alejandro Illecas
fonte

86

Melhor resposta. A resposta aceita cria uma cópia, não move o elemento como a pergunta pede.

paulscode

97

Desculpe, mas a resposta aceita por Andrew Hare está correta - a remoção é desnecessária. Experimente no JSFiddle da Pixic acima - se você remover as chamadas de desanexação, funciona exatamente da mesma forma, ou seja, faz uma jogada, NÃO uma cópia. Aqui está a bifurcação com apenas uma alteração: jsfiddle.net/D46y5 Conforme documentado na API: api.jquery.com/appendTo : "Se um elemento selecionado dessa maneira for inserido em um único local em outro local do DOM, ele será movido no destino (não clonado) e um novo conjunto que consiste no elemento inserido é retornado "

John - Não é um número

8

@ John-NotANumber está certo - detach () não é necessário aqui. A resposta aceita é a melhor, você só precisa ler a documentação corretamente.

LeonardChallis 23/09

11

A documentação appendTo também diz: "Se houver mais de um elemento de destino, no entanto, cópias clonadas do elemento inserido serão criadas para cada destino após o primeiro e esse novo conjunto (o elemento original mais os clones) será retornado.". Portanto, no caso geral, esta solução também pode criar cópias!

Vincent Pazeller

ótimo! Ou você pode usar isso para ser mais específico sobre onde mover$('#nodeToMove').insertAfter('#insertAfterThisElement');

Victor Augusto

108

Eu apenas usei:

$('#source').prependTo('#destination');

Que eu peguei daqui .

kjc26ster
fonte

7

Bem, desanexar é útil quando você deseja manter o elemento e reinseri-lo mais tarde, mas no seu exemplo, você o reinsere instantaneamente de qualquer maneira.

Tim Büthe

1

Receio não estar entendendo o que você está falando, você poderia fornecer um código de exemplo?

precisa saber é o seguinte

1

Quero dizer, prependTo, desconecta o elemento de sua posição original e o insere no novo. A função de desanexação, por outro lado, apenas desanexa o elemento selecionado e você pode salvá-lo em uma variável para inseri-lo no DOM posteriormente. O problema é que sua chamada de desanexação é desnecessária. Remova-o e você obterá o mesmo efeito.

Tim Büthe

1

Incrível que as edições mudou esta resposta completamente a tal ponto que uma outra resposta foi adicionado um ano depois (idêntico ao original) e tem mais de 800 upvotes ...

hlscalon

96

Que tal uma solução JavaScript ?

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

Confira.

Ali Bassam
fonte

8

Por que usar createDocumentFragment em vez de simplesmente document.getElementById ('destination'). AppendChild (document.getElementById ('source'))?

Gunar Gessner

6

@ GunarC.Gessner supondo que você precise modificar o objeto de origem antes de adicioná-lo ao objeto de destino, a melhor abordagem é usar o fragmento que é um objeto imaginário e não faz parte da árvore do DOM, você obtém um melhor desempenho ao modificar o objeto de origem quando ele foi transferido de seu local original (agora está dentro do fragmento) em vez de modificá-lo no local inicial antes de anexá-lo.

Ali Bassam

5

Quero acrescentar a relevância de oferecer uma solução pura para JavaScript. Não deve ser assumido jQuery está sempre sendo usado

Alexander Fradiani

1

Pergunta: Ao anexar o nó filho, estamos perdendo os eventos anexados?

jimasun

1

A resposta para minha própria pergunta é sim, ela mantém os eventos em anexo.

jimasun

95

Se o divlocal em que você deseja colocar seu elemento possui conteúdo e você deseja que o elemento seja exibido após o conteúdo principal:

  $("#destination").append($("#source"));

Se o divlocal em que você deseja colocar seu elemento possui conteúdo e você deseja mostrar o elemento antes do conteúdo principal:

$("#destination").prepend($("#source"));

Se o divlocal em que você deseja colocar seu elemento estiver vazio, ou você desejar substituí- lo totalmente:

$("#element").html('<div id="source">...</div>');

Se você deseja duplicar um elemento antes de qualquer uma das opções acima:

$("#destination").append($("#source").clone());
// etc.

sbaaaang
fonte

Estou achando um pouco difícil de ler todo o negrito, mas esta é a resposta mais informativa, por isso recebe meu voto positivo.

Michael Scheper

32

Você pode usar:

Para inserir depois,

jQuery("#source").insertAfter("#destination");

Para inserir dentro de outro elemento,

jQuery("#source").appendTo("#destination");

Subrahmanyam
fonte

20

Se você quiser uma demonstração rápida e mais detalhes sobre como mover elementos, tente este link:

http://html-tuts.com/move-div-in-another-div-with-jquery

Aqui está um pequeno exemplo:

Para mover ACIMA de um elemento:

$('.whatToMove').insertBefore('.whereToMove');

Para mover APÓS um elemento:

$('.whatToMove').insertAfter('.whereToMove');

Para mover-se dentro de um elemento, ACIMA DE TODOS os elementos dentro desse contêiner:

$('.whatToMove').prependTo('.whereToMove');

Para mover-se dentro de um elemento, APÓS TODOS os elementos dentro desse contêiner:

$('.whatToMove').appendTo('.whereToMove');

Dan
fonte

19

Você pode usar o seguinte código para mover a origem para o destino

 jQuery("#source")
       .detach()
       .appendTo('#destination');

tente trabalhar codepen

Mostrar snippet de código

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}

#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>

Expandir snippet

Subodh Ghulaxe
fonte

11

Pergunta antiga, mas cheguei aqui porque preciso mover o conteúdo de um contêiner para outro, incluindo todos os ouvintes do evento .

O jQuery não tem como fazê-lo, mas a função DOM padrão appendChild possui.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

O uso de appendChild remove o .source e o coloca no destino, incluindo seus ouvintes de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

HMR
fonte

6

Você também pode tentar:

$("#destination").html($("#source"))

Mas isso substituirá completamente tudo o que você possui #destination.

Tamas
fonte

2

E interrompa os ouvintes de eventos no elemento movido.

Igor Pomaranskiy

4

Percebi uma grande perda de memória e diferença de desempenho entre insertAfter& afterou insertBefore& before.. Se você possui vários elementos DOM ou precisa usar after()ou before()dentro de um evento MouseMove , a memória do navegador provavelmente aumentará e as próximas operações serão muito lentas.

A solução que acabei de experimentar é usar o insertBefore before()e depois o insertAfter after().

spetsnaz
fonte

Parece um problema dependente da implementação do mecanismo JavaScript. Com qual versão do navegador e mecanismo JS você vê isso?

Mark Richman

1

Estou na versão 36.0.1985.125 do Chrome e estou usando o jQuery v1.11.1. Vinculo uma função ao evento mousemove, que move um DIV simples para baixo ou para cima do elemento sobre o qual o mouse está. Portanto, esse evento e função é executado enquanto você arrasta o cursor. O vazamento de memória ocorre com after () e before (), se você mover o cursor por 30seg +, e desaparece se eu apenas usar insertAfter & insertBefore.

Spetsnaz

1

Eu abriria um bug com o Google nesse caso.

Mark Richman

2

Você pode usar JavaScript puro, usando o appendChild()método ...

O método appendChild () anexa um nó como o último filho de um nó.

Dica: Se você deseja criar um novo parágrafo, com texto, lembre-se de criar o texto como um nó Texto que você anexa ao parágrafo e, em seguida, anexa o parágrafo ao documento.

Você também pode usar esse método para mover um elemento de um elemento para outro.

Dica: Use o método insertBefore () para inserir um novo nó filho antes de um nó filho especificado e existente.

Para que você possa fazer isso, é isso que eu criei para você, usando appendChild(), execute e veja como funciona no seu caso:

function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}

#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}

<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

<button onclick="appendIt()">Move Element</button>

Expandir snippet

Alireza
fonte

0

Por uma questão de integridade, há outra abordagem wrap()ou wrapAll()mencionada neste artigo . Portanto, a questão do OP poderia ser resolvida com isso (ou seja, assumindo <div id="destination" />que ainda não exista, a seguinte abordagem criará esse invólucro do zero - o OP não ficou claro se o invólucro já existe ou não):

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

Parece promissor. No entanto, quando eu estava tentando fazer $("[id^=row]").wrapAll("<fieldset></fieldset>")em várias estruturas aninhadas como esta:

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

Ela envolve corretamente os <div>...</div>e <input>...</input>mas de alguma forma deixa de fora a <label>...</label>. Então acabei usando o explícito $("row1").append("#a_predefined_fieldset"). Então, YMMV.

RayLuo
fonte

0

melhoria de tamanho sujo da resposta de Bekim Bacaj

div { border: 1px solid ; margin: 5px }

<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>

Expandir snippet

Kamil Kiełczewski
fonte

Como mover um elemento para outro elemento?

Respostas: