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

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

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

appendTo main
prependTo main

в

мое решение:

Ход:

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

Копия:

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

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

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

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

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

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

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

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

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

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

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

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

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

А как насчет язык JavaScript решение?

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

фрагмент ВАР = документ.createDocumentFragment();

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

фрагмент.метода appendChild(документ.метода getElementById('Источник'));

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

документ.метода getElementById('пункт назначения').метода appendChild(фрагмент);`

[Проверить это.][1]

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

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

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

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

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

Когда-нибудь пробовали обычный JavaScript... назначения.метода appendChild(источник); ?

в

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

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

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

в

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

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

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

Чтобы двигаться выше элемент:

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

Для перемещения через элемент:

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

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

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

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

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

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

 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>

Move

в

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

в jQuery не'Т есть способ сделать это, но стандартная функция метода 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

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

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

Но для этого придется полностью переписать все, что вы в пути.

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

Решение Я'вэ только опытные заключается в использовании inserBefore, а не до () и insertAfter, а не после()`.

Вы можете использовать чистый 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>

Move Element

в

Для полноты картины, есть еще один подход обертывание() или wrapAll (), приведенным в [настоящей статьи](https://www.elated.com/articles/jquery-adding-elements/#wrap-wrapAll-wrapInner). Так что ОП'ы вопрос может быть решена с помощью этого (если предположить, что в<див ИД="по назначению" и />` еще не существует, следующий подход будет создать такую оболочку с нуля - ОП не ясно, о том, фантик уже существует или нет):

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

Это звучит многообещающе. Однако, когда я пытаюсь сделать `$(" и[ИД^=строка] и").wrapAll(" в<полей></полей>") смотрите на несколько вложенную структуру такой:

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

Это правильно обертывания тех, в <див>...</дел> и в <ввод>...</входной сигнал> но почему-то оставляет в организации <ярлык>...</ярлык>. Так что я в конечном итоге использовать явное `$("и строкой 1 и").добавить(" и#a_predefined_fieldset и") вместо этого. Так что YMMV.