Como mover um elemento para outro elemento?
<div id="source">
...
</div>
para isto:
<div id="destination">
...
</div>
para que eu tenha isto:
<div id="destination">
<div id="source">
...
</div>
</div>
13 answers
Pode querer usar o appendTo
função (que adiciona ao fim do elemento):
$("#source").appendTo("#destination");
Em alternativa, pode utilizar o prependTo
função (que adiciona ao início do elemento):
$("#source").prependTo("#destination");
Exemplo:
$("#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>
A minha solução:
Mexe-te:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
Cópia:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
Note o uso de .desanexar(). Ao copiar, tenha cuidado para que você não esteja duplicando IDs.
Se o div
onde você quer colocar o seu elemento tem conteúdo dentro, e você quer que o elemento mostre Depois de {[10] } o conteúdo principal:
$("#destination").append($("#source"));
Se div
, onde você quer colocar o seu elemento tem conteúdo para dentro, e você quer mostrar o elemento antes de o conteúdo principal:
$("#destination").prepend($("#source"));
Se o div
onde quer colocar o seu elemento estiver vazio, ou se quiser substituir {[10] } completamente:
$("#element").html('<div id="source">...</div>');
Se quiser duplicar um elemento antes qualquer uma das situações acima referidas:
$("#destination").append($("#source").clone());
// etc.
E que tal uma solução JavaScript?
Declare um fragmento:
var fragment = document.createDocumentFragment();
Adicione o elemento desejado ao fragmento:
fragment.appendChild(document.getElementById('source'));
Adicione o fragmento ao elemento desejado:
document.getElementById('destination').appendChild(fragment);
Pode usar:
Para Inserir Depois,
jQuery("#source").insertAfter("#destination");
Para inserir dentro de outro elemento,
jQuery("#source").appendTo("#destination");
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>
Pode usar o seguinte código para mover a fonte para o destino
jQuery("#source")
.detach()
.appendTo('#destination');
Tenta trabalhar codepen
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>
Se quiser uma demonstração rápida e mais detalhes sobre como mover os elementos, tente este link:
Http://html-tuts.com/move-div-in-another-div-with-jquery
Aqui está um pequeno exemplo:
Mover-se acima de um elemento:
$('.whatToMove').insertBefore('.whereToMove');
Mover-se depois de um elemento:
$('.whatToMove').insertAfter('.whereToMove');
Mover-se dentro de um elemento, acima de todos os elementos dentro desse recipiente:
$('.whatToMove').prependTo('.whereToMove');
Mover-se dentro de um elemento, depois de todos os elementos dentro desse recipiente:
$('.whatToMove').appendTo('.whereToMove');
Pergunta antiga, mas cheguei aqui porque preciso de mover o conteúdo de um contentor para outro incluindo todos os ouvintes de Eventos.
O JQuery não tem forma de o fazer, mas o apêndice da função DOM padrão tem.//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
Se usar o appendChild remove o .fonte e coloca-a no alvo, incluindo os seus ouvintes de Eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
Também pode tentar:
$("#destination").html($("#source"))
Mas isto irá substituir completamente tudo o que tiver em #destination
.
Notei uma enorme fuga de memória e diferença de desempenho entre o seguinte e depois ou o seguinte antes e antes .. Se você tem toneladas de elementos DOM, ou você precisa usar depois() ou antes() dentro de um evento MouseMove, a memória do navegador provavelmente irá aumentar e as próximas operações serão muito lentas. A solução que acabei de experimentar é usar inserBefore instead before () e insertAfter instead after ().
Por uma questão de exaustividade, existe outra abordagem wrap()
ou wrapAll()
mencionada em Este artigo. Então a questão do OP poderia possivelmente ser resolvida por isso (isto é, assumindo que o <div id="destination" />
ainda não existe, a seguinte abordagem irá criar tal Invólucro a partir do zero - o OP não estava 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 múltiplas estruturas aninhadas como isto:
<div id="row1">
<label>Name</label>
<input ...>
</div>
Envolve correctamente aqueles <div>...</div>
e <input>...</input>
mas de alguma forma deixa de fora o <label>...</label>
. Então acabei por usar o explícito $("row1").append("#a_predefined_fieldset")
em vez disso. Então, MMMV.