Как переместить элемент в другой элемент?

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

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

в:

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

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

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
1455
html javascript jquery

13 ответов

вы можете использовать appendTo

1605

мое решение:

переместить:

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

копия:

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

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

792

Я:

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

который я схватил из здесь.

105

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

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

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

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

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

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

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

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

о JavaScript решение?

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

var fragment = document.createDocumentFragment();

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

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

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

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

проверить.

68

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

Вставить После

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

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

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

когда-либо пробовал простой 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>
19

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

 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>
16

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

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

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

для перемещения над элементом:

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

для перемещения после элемента:

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

для перемещения внутри элемента, над всеми элементами внутри этого контейнера:

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

для перемещения внутри элемент, после всех элементов внутри этого контейнера:

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

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

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 удаляет .источник и помещает его в цель, включая слушателей событий:https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

10

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

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

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

5

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

4

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

$("#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>. Поэтому я в конечном итоге использовал explicit . Итак, YMMV.

0