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

1567

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

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

в это:

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

чтобы у меня было это:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
  • 19
    Просто используйте $ (target_element) .append (to_be_inserted_element);
  • 2
    Или: destination.appendChild (source) с использованием простого javascript
Показать ещё 2 комментария
Теги:

14 ответов

1714
Лучший ответ

Вы можете использовать функцию 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>
Поделиться
  • 21
    Предупреждение о том, что в jQuery mobile это может работать некорректно, поскольку вместо этого может быть создана еще одна копия элемента.
  • 28
    appenTo создает копию или фактически перемещает весь div к месту назначения? (потому что, если он скопирует, он вызовет ошибки при вызове div по id)
Показать ещё 13 комментариев
853

мое решение:

MOVE:

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

COPY:

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

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

Поделиться
  • 8
    Сделал JSFiddle для этого решения: jsfiddle.net/Pixic/8VrdE
  • 79
    Лучший ответ. Принятый ответ создает копию, но не перемещает элемент, как требует вопрос.
Показать ещё 7 комментариев
100

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

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

Кого я схватил из здесь.

Поделиться
  • 6
    Ну, отсоединение полезно, когда вы хотите удержать элемент и вставить его позже, но в вашем примере вы все равно вставите его немедленно.
  • 1
    Боюсь, я не совсем понимаю, к чему вы клоните, не могли бы вы предоставить пример кода?
Показать ещё 2 комментария
83

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

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

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

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

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

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

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

$("#destination").append($("#source").clone());
// etc.
Поделиться
  • 0
    Вы не можете использовать селекторы с .append() . Если вы используете строку в качестве аргумента, она буквально добавит «#other_element» к элементу.
  • 0
    @PhilBozak хорошо, да моя ошибка :), если вы хотите, чтобы ваш свободный отредактировать
Показать ещё 1 комментарий
72

Как насчет решения JavaScript?

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

var fragment = document.createDocumentFragment();

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

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

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

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

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

Поделиться
  • 5
    Зачем использовать createDocumentFragment вместо простого document.getElementById ('destination'). AppendChild (document.getElementById ('source'))?
  • 6
    @ GunarC.Gessner, если вам нужно изменить исходный объект перед добавлением его к целевому объекту, тогда лучше всего использовать фрагмент, который является воображаемым объектом и не является частью дерева DOM, вы получаете лучшую производительность при изменении исходный объект, когда он был переведен из своего исходного места (теперь он внутри фрагмента), а не изменяет его в своем первоначальном месте перед добавлением.
Показать ещё 3 комментария
27

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

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

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

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

jQuery("#source").appendTo("#destination");
Поделиться
19

Пробовал простой 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>
Поделиться
  • 0
    * кто-то поставил префикс глобального события при onclick демо-фрагмента с ключевым словом var в своей попытке улучшить пост - но это неправильно!
  • 4
    Удивительно, как люди до сих пор думают, что jQuery равен JavaScript. Больше нет необходимости в jQuery в 2017 году.
17

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

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

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

Чтобы переместить ВЫШЕ элемент:

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

Для перемещения ПОСЛЕ элемента:

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

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

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

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

$('.whatToMove').appendTo('.whereToMove');
Поделиться
16

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

 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>
Поделиться
10

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

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

Поделиться
5

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

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

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

Поделиться
  • 2
    И разбить слушателей событий на перемещенный элемент.
4

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

Поделиться
  • 0
    Это похоже на проблему, связанную с реализацией движка JavaScript. В какой версии браузера и движке JS вы видите это?
  • 1
    Я использую Chrome версии 36.0.1985.125 и использую jQuery v1.11.1. Я связываю функцию с событием mousemove, которая перемещает простой DIV вниз или вверх по элементу, над которым находится мышь. Следовательно, это событие и функция запускаются, когда вы перетаскиваете курсор. Утечка памяти происходит с after () и before (), если вы перемещаете курсор на 30 секунд +, и исчезает, если я просто использую insertAfter & insertBefore.
Показать ещё 1 комментарий
0

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

Для полноты есть еще один метод 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.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню