Я хотел бы переместить один элемент DIV в другой. Например, я хочу переместить это (включая всех детей):

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

В это:

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

Так что у меня так:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
1810
Mark Richman 15 Авг 2009 в 00:14

14 ответов

Лучший ответ

Вы можете использовать функцию appendTo (которая добавляет в конец элемента) :

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

В качестве альтернативы вы можете использовать функцию prependTo (которая добавляет в начало элемента):

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

Примере:

$("#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>
1774
Clonkex 26 Фев 2018 в 00:32

Для полноты картины есть другой подход wrap() или wrapAll(), упомянутый в эта статья. Таким образом, вопрос OP может быть решен с помощью этого (то есть при условии, что <div id="destination" /> еще не существует, следующий подход создаст такую оболочку с нуля - OP не было ясно о том, существует ли уже оболочка или нет). ) :

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

Это звучит многообещающе. Тем не менее, когда я пытался сделать $("[id^=row]").wrapAll("<fieldset></fieldset>") для нескольких вложенных структур, как это:

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

Он правильно оборачивает эти <div>...</div> и <input>...</input>, НО НЕКОТОРЫЕ ВЫСТАВЛЯЮТ ИЗ <label>...</label>. Поэтому я в итоге использовал явное $("row1").append("#a_predefined_fieldset") вместо этого. Итак, YMMV.

0
RayLuo 4 Сен 2018 в 07:18

Вы можете использовать чистый JavaScript, используя метод appendChild() ...

Метод appendChild () добавляет узел в качестве последнего дочернего элемента узла.

Совет. Если вы хотите создать новый абзац с текстом, не забудьте создать текст как узел текста, который вы добавляете к абзацу, а затем добавьте абзац в документ.

Вы также можете использовать этот метод для перемещения элемента из одного элемента в другой.

Совет: Используйте метод insertBefore () для вставки нового дочернего узла перед указанным существующим дочерним узлом.

Таким образом, вы можете сделать это, чтобы выполнить работу, это то, что я создал для вас, используя appendChild(), запустите и посмотрите, как это работает для вашего случая:

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>
2
Alireza 19 Янв 2019 в 01:01

Я заметил огромную утечку памяти и разницу в производительности между insertAfter и after или insertBefore и before .. Если у вас много элементов DOM или вам нужно использовать {{X4 }} или before() внутри события MouseMove , память браузера, вероятно, увеличится, и следующие операции будут выполняться очень медленно.

Решение, которое я только что испытал, - это использовать insertBefore вместо before() и insertAfter вместо after().

4
AI Perera 3 Окт 2019 в 10:29

Вы также можете попробовать:

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

Но это полностью перезапишет все, что у вас есть в #destination.

6
frb 24 Июл 2015 в 14:41

Старый вопрос, но он попал сюда, потому что мне нужно переместить контент из одного контейнера в другой , включая всех слушателей событий .

У jQuery нет способа сделать это, но есть стандартная функция DOM appendChild.

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

Использование appendChild удаляет .source и помещает его в цель, включая его прослушиватели событий: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

10
HMR 24 Дек 2014 в 04:06

Вы можете использовать следующий код для перемещения источника к месту назначения

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

Попробуйте 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>
17
Subodh Ghulaxe 2 Ноя 2015 в 08:49

Если вам нужна быстрая демонстрация и более подробная информация о том, как вы перемещаете элементы, попробуйте эту ссылку:

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


Вот краткий пример:

Чтобы переместить элемент выше:

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

Чтобы переместить ПОСЛЕ элемента:

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

Чтобы переместиться внутрь элемента, НАД ВСЕМИ элементами внутри этого контейнера:

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

Чтобы переместиться внутрь элемента, ПОСЛЕ ВСЕХ элементов внутри этого контейнера:

$('.whatToMove').appendTo('.whereToMove');
19
Dan 17 Фев 2015 в 22:03

Вы когда-нибудь пробовали простой 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>
25
Bekim Bacaj 23 Июл 2017 в 13:44

Ты можешь использовать:

Вставить после,

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

Чтобы вставить внутрь другого элемента,

jQuery("#source").appendTo("#destination");
31
AlexC 24 Июн 2013 в 11:00

Как насчет JavaScript ?

Объявить фрагмент:

var fragment = document.createDocumentFragment();

Добавить нужный элемент к фрагменту:

fragment.appendChild(document.getElementById('source'));

Добавить фрагмент к желаемому элементу:

document.getElementById('destination').appendChild(fragment);

Проверьте это.

92
Ali Bassam 15 Ноя 2015 в 20:04

Если div, куда вы хотите поместить свой элемент, имеет содержимое внутри, и вы хотите, чтобы элемент показывал после основного содержимого:

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

Если div, куда вы хотите поместить свой элемент, имеет содержимое внутри, и вы хотите показать элемент перед основным содержимым:

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

Если div, куда вы хотите поместить свой элемент, пуст, или вы хотите заменить его полностью:

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

Если вы хотите продублировать элемент перед любым из вышеперечисленных:

$("#destination").append($("#source").clone());
// etc.
94
7 revs, 2 users 66% 22 Июн 2016 в 23:05

Я просто использовал:

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

Который я взял из здесь.

107
Cᴏʀʏ 24 Июл 2015 в 14:55

Мое решение:

ШАГ:

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

COPY:

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

Обратите внимание на использование .detach (). При копировании будьте осторожны, чтобы не дублировать идентификаторы.

896
René Sackers 22 Окт 2015 в 09:29