Jak przenieść element do innego elementu?

1688

Chciałbym przenieść jeden element DIV do innego. Na przykład chcę to przenieść (w tym wszystkie dzieci):

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

zaangażowany w to:

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

więc mam to:

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

javascript jquery html Mark Richman
źródło

21

Wystarczy użyć $ (element_elementowy) .append (to_be_inserted_element);

Mohammad Areeb Siddiqui

2

Lub: destination.appendChild (źródło) przy użyciu zwykłego javascript

Łukasz

czy możemy to osiągnąć za pomocą CSS? czy to jest możliwe ?

RajKumar Samala

6

@RajKumarSamala CSS nie może zmieniać struktury HTML, tylko jego prezentację.

Mark Richman,

38

Czy kiedykolwiek próbowałeś zwykłego JavaScript ... 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>

Rozwiń fragment kodu

Bekim Bacaj
źródło

* ktoś poprzedził globalne wydarzenie onclick fragmentu wersji demo słowem kluczowym varw swojej próbie ulepszenia posta - ale to źle!

Bekim Bacaj,

6

To niesamowite, jak ludzie nadal myślą, że jQuery równa się JavaScript. Naprawdę nie ma już potrzeby korzystania z jQuery w 2017 roku.

nkkollaw

2

w 2017 roku nie ma potrzeby wysyłania jquery, ale czasami pomaga to zastosować coś lżejszego i podobnego do zadań, które wykonujesz w kółko w każdym projekcie. używam cash-dom jako łatwego sposobu na nasłuchiwanie zdarzeń document.ready, window.load w sposób przyjazny dla różnych przeglądarek. bułka z masłem.

eballeste,

1

Zmieniając to na przyjętą odpowiedź, teraz jest 2020 r. :)

Mark Richman

1

To niesamowite, jak ludzie nadal myślą, że jQuery równa się JavaScript. Naprawdę nie ma już potrzeby korzystania z jQuery w 2020 roku.

ii iml0sto1

1793

Możesz użyć appendTofunkcji (która dodaje się do końca elementu):

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

Alternatywnie możesz użyć prependTofunkcji (która dodaje się do początku elementu):

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

Przykład:

Pokaż fragment kodu

$("#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>

Rozwiń fragment kodu

Andrew Hare
źródło

23

Ostrzeżenie, że może to nie działać poprawnie w jQuery mobile, ponieważ może zamiast tego utworzyć kolejną kopię elementu.

Jordan Reiter,

32

czy appenTo tworzy kopię, czy faktycznie przenosi cały div do miejsca docelowego? (ponieważ jeśli kopiuje,

50

Oto doskonały artykuł na temat usuwania, zastępowania i przenoszenia elementów w jQuery: elated.com/articles/jquery-removing-replacing-moving-elements

xhh

42

Zwróć uwagę na dokumentację jQuery dla appendTo stwierdza, że element został przeniesiony: 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

Nie przenosisz go, tylko dołączasz. Poniższa odpowiedź zawiera właściwy ruch.

Aaron

913

moje rozwiązanie:

RUSZAJ SIĘ:

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

KOPIUJ:

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

Zwróć uwagę na użycie .detach (). Podczas kopiowania uważaj, aby nie powielać identyfikatorów.

Alejandro Illecas
źródło

86

Najlepsza odpowiedź. Zaakceptowana odpowiedź tworzy kopię, nie przesuwa elementu tak, jak pyta pytanie.

paulscode

97

Przepraszamy, ale zaakceptowana odpowiedź Andrew Hare'a jest poprawna - odłączanie jest niepotrzebne. Wypróbuj to w JSFiddle Pixic powyżej - jeśli usuniesz wywołania detach, działa dokładnie tak samo, tzn. Wykonuje ruch, NIE kopiuje. Oto rozwidlenie z tylko jedną zmianą: jsfiddle.net/D46y5 Jak udokumentowano w interfejsie API: api.jquery.com/appendTo : „Jeśli element wybrany w ten sposób zostanie wstawiony w jedno miejsce w innym miejscu w DOM, zostanie on przeniesiony do celu (nie sklonowany) i zwracany jest nowy zestaw składający się z wstawionego elementu ”

John - Not A Number

8

@ John-NotANumber ma rację - detach () nie jest tutaj potrzebne. Przyjęta odpowiedź JEST najlepsza, wystarczy właściwie przeczytać dokumentację.

LeonardChallis,

11

Dokumentacja appendTo mówi również: „Jeśli istnieje więcej niż jeden element docelowy, sklonowane kopie wstawionego elementu zostaną utworzone dla każdego celu po pierwszym, a ten nowy zestaw (oryginalny element plus klony) zostanie zwrócony.”. Tak więc w ogólnym przypadku to rozwiązanie MOŻE również tworzyć kopie!

Vincent Pazeller

świetny! Możesz też użyć tego, aby sprecyzować, gdzie się przenieść$('#nodeToMove').insertAfter('#insertAfterThisElement');

Victor Augusto

108

Właśnie użyłem:

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

Który stąd złapałem .

kjc26ster
źródło

7

Cóż, odłączanie jest przydatne, gdy chcesz zatrzymać element i włożyć go później, ale w twoim przykładzie i tak wstawiasz go natychmiast.

Tim Büthe,

1

Obawiam się, że nie do końca rozumiem, o co ci chodzi, czy możesz podać przykładowy kod?

kjc26ster,

1

Mam na myśli, prependTo, odłącza element od jego pierwotnej pozycji i wstawia go do nowego. Z drugiej strony funkcja odłączania po prostu odłącza wybrany element i można zapisać go w zmiennej, aby wstawić go do DOM w późniejszym czasie. Chodzi o to, że połączenie typu „odłącz” jest niepotrzebne. Usuń go, a osiągniesz ten sam efekt.

Tim Büthe,

1

Niesamowite, że zmiany całkowicie zmieniły tę odpowiedź do tego stopnia, że rok później została dodana inna odpowiedź (identyczna z oryginałem) i uzyskała ponad 800 głosów pozytywnych ...

hlscalon

96

Co z rozwiązaniem 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);

Sprawdź to.

Ali Bassam
źródło

8

Dlaczego warto korzystać z createDocumentFragment zamiast po prostu document.getElementById ('destination'). AppendChild (document.getElementById ('source'))?

Gunar Gessner

6

@ GunarC.Gessner zakładając, że musisz zmodyfikować obiekt źródłowy przed dodaniem go do obiektu docelowego, wówczas najlepszym podejściem jest użycie fragmentu, który jest urojonym obiektem i nie jest częścią drzewa DOM, uzyskujesz lepszą wydajność podczas modyfikowania obiekt źródłowy, gdy został przeniesiony ze swojego pierwotnego miejsca (teraz znajduje się wewnątrz fragmentu) zamiast modyfikować go w swoim pierwotnym miejscu przed dołączeniem.

Ali Bassam,

5

Chcę dodać do znaczenia oferowania czystego rozwiązania JavaScript. Nie należy zakładać, że jQuery jest zawsze używane

Alexander Fradiani

1

Pytanie: Czy dołączając węzeł potomny tracimy dołączone zdarzenia?

jimasun

1

Odpowiedź na moje własne pytanie brzmi: tak, zachowuje załączone wydarzenia.

jimasun

95

Jeśli w divmiejscu, w którym chcesz umieścić element, znajduje się treść, a chcesz, aby element wyświetlał się po głównej zawartości:

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

Jeśli w divmiejscu, w którym chcesz umieścić element, znajduje się zawartość, a chcesz pokazać element przed główną treścią:

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

Jeśli miejsce, w divktórym chcesz umieścić element, jest puste lub chcesz go całkowicie zastąpić :

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

Jeśli chcesz powielić element przed którymkolwiek z powyższych:

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

sbaaaang
źródło

Uważam, że cała pogrubiona czcionka jest nieco trudna do odczytania, ale jest to najbardziej pouczająca odpowiedź, więc zyskuje moje poparcie.

Michael Scheper

32

Możesz użyć:

Aby wstawić po,

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

Aby wstawić do innego elementu,

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

Subrahmanyam
źródło

20

Jeśli chcesz mieć szybkie demo i więcej szczegółów na temat przenoszenia elementów, wypróbuj ten link:

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

Oto krótki przykład:

Aby przenieść POWYŻEJ elementu:

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

Aby przejść PO elemencie:

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

Aby poruszać się w elemencie, POWYŻEJ WSZYSTKIE elementy w tym kontenerze:

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

Aby poruszać się wewnątrz elementu, PO WSZYSTKICH elementach w tym kontenerze:

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

Dan
źródło

19

Możesz użyć następującego kodu, aby przenieść źródło do miejsca docelowego

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

spróbuj działać codepen

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Subodh Ghulaxe
źródło

11

Stare pytanie, ale dotarłem tutaj, ponieważ muszę przenosić zawartość z jednego kontenera do drugiego, w tym wszystkich detektorów zdarzeń .

jQuery nie ma na to sposobu, ale robi to standardowa funkcja DOM appendChild.

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

Użycie appendChild usuwa .source i umieszcza go w celu, w tym w detektorach zdarzeń: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

HMR
źródło

6

Możesz także spróbować:

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

Ale to całkowicie zastąpi wszystko, co masz #destination.

Tamas
źródło

2

I przerywaj detektory zdarzeń na przeniesionym elemencie.

Igor Pomaranskiy

4

Zauważyłem ogromny przeciek pamięci i różnicę wydajności między insertAfteri afterlub insertBeforei before. Jeśli masz mnóstwo elementów DOM lub potrzebujesz użyć after()lub before()wewnątrz zdarzenia MouseMove , pamięć przeglądarki prawdopodobnie wzrośnie, a kolejne operacje będą przebiegać naprawdę wolno.

Rozwiązaniem, którego właśnie doświadczyłem, jest użycie insertBefore zamiast before()i insertAfter zamiast after().

spetsnaz
źródło

To brzmi jak problem związany z implementacją silnika JavaScript. W jakiej wersji przeglądarki i silniku JS to widzisz?

Mark Richman

1

Używam przeglądarki Chrome w wersji 36.0.1985.125 i korzystam z jQuery v1.11.1. W zdarzeniu mousemove wiążę funkcję, która przesuwa prosty DIV w dół lub w górę elementu, nad którym znajduje się mysz. Dlatego to zdarzenie i funkcja działają podczas przeciągania kursora. Wyciek pamięci występuje w przypadku funkcji after () i before (), jeśli przesuwasz kursor przez 30 sekund +, i znika, jeśli zamiast tego użyję insertAfter i insertBefore.

spetsnaz

1

W tym przypadku otworzyłbym błąd w Google.

Mark Richman

2

Możesz użyć czystego JavaScript, używając appendChild()metody ...

Metoda appendChild () dołącza węzeł jako ostatnie dziecko węzła.

Wskazówka: Jeśli chcesz utworzyć nowy akapit z tekstem, pamiętaj o utworzeniu tekstu jako węzła tekstowego, który dołączasz do akapitu, a następnie dołącz akapit do dokumentu.

Możesz także użyć tej metody, aby przenieść element z jednego elementu do drugiego.

Wskazówka: Użyj metody insertBefore (), aby wstawić nowy węzeł potomny przed określonym, istniejącym węzłem potomnym.

Aby to zrobić, możesz to zrobić, oto, co dla ciebie stworzyłem, używając appendChild(), uruchamiając i sprawdzając, jak to działa w twoim przypadku:

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>

Rozwiń fragment kodu

Alireza
źródło

0

Dla kompletności istnieje inne podejście wrap()lub wrapAll()wspomniane w tym artykule . Pytanie OP może więc zostać rozwiązane w ten sposób (tzn. Zakładając, że <div id="destination" />jeszcze nie istnieje, poniższe podejście utworzy takie opakowanie od zera - PO nie było jasne, czy opakowanie już istnieje, czy nie):

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

Brzmi obiecująco. Jednak gdy próbowałem zrobić $("[id^=row]").wrapAll("<fieldset></fieldset>")na wielu zagnieżdżonych strukturach, takich jak to:

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

To właściwie zawija te <div>...</div>i <input>...</input>ale jakoś pominięto <label>...</label>. Więc $("row1").append("#a_predefined_fieldset")zamiast tego użyłem jawnego . Więc YMMV.

RayLuo
źródło

Jak przenieść element do innego elementu?

Odpowiedzi: