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

1689

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

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

в это:

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

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

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

javascript jquery html Марк Ричман
источник

21

Просто используйте $ (target_element) .append (to_be_inserted_element);

Мохаммед Ариб Сиддики

2

Или: destination.appendChild (source) с использованием простого javascript

Люк

мы можем достичь этого с помощью CSS? это возможно ?

РаджКумар Самала

6

@RajKumarSamala CSS не может изменить структуру HTML, только его представление.

Марк Ричман

39

Когда-нибудь пробовал простой 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>

Развернуть фрагмент

Беким Бакай
источник

* кто-то поставил перед глобальным событием onclick фрагмента демонстрации ключевое слово varв своей попытке улучшить пост - но это неправильно!

Беким Бакай

6

Удивительно, как люди все еще думают, что jQuery равен JavaScript. Нет необходимости в jQuery в 2017 году, правда.

nkkollaw

2

нет необходимости в jquery в 2017 году, но иногда это помогает использовать что-то более легкое и похожее для задач, которые вы делаете снова и снова в каждом отдельном проекте. Я использую Cash-Dom как простой способ прослушивания событий document.ready, window.load в кросс-браузерной форме. очень просто.

eballeste

1

Меняя это на принятый ответ, теперь, когда наступил 2020 год :)

Марк Ричман

1

Удивительно, как люди все еще думают, что jQuery равен JavaScript. В 2020 году больше нет необходимости в jQuery.

ii iml0sto1

1794

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

Развернуть фрагмент

Эндрю Хэйр
источник

23

Предупреждение о том, что в jQuery mobile это может работать некорректно, поскольку вместо этого может быть создана другая копия элемента.

Джордан Рейтер

32

appenTo создает копию или фактически перемещает весь div к месту назначения? (потому что, если он скопирует, он вызовет ошибки при вызове div по id)

50

Вот отличная статья об извлечении, замене и перемещении элементов в jQuery: elated.com/articles/jquery-removing-replacing-moving-elements

xhh

42

Обратите внимание на документацию jQuery для appendTo, в которой говорится, что элемент перемещен: 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

Вы не двигаете это, просто добавляете. Ниже ответ делает правильное движение.

Аарон

913

мое решение:

ШАГ:

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

COPY:

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

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

Алехандро Иллекас
источник

86

Лучший ответ. Принятый ответ создает копию, но не перемещает элемент, как требует вопрос.

paulscode

97

Извините, но принятый Эндрю Хэром правильный ответ - отсоединение не нужно. Попробуйте это в JSFiddle от Pixic выше - если вы удаляете вызовы detach, он работает точно так же, то есть выполняет перемещение, а не копию. Вот ответвление только с одним изменением: jsfiddle.net/D46y5 Как описано в API: api.jquery.com/appendTo : «Если элемент, выбранный таким образом, вставляется в одно место в другом месте в DOM, он будет перемещен в цель (не клонировано) и возвращается новый набор, состоящий из вставленного элемента "

Джон - Не число

8

@ John-NotANumber прав - detach () здесь не нужен. Принятый ответ - лучший, вам просто нужно правильно прочитать документацию.

Леонард Чаллис

11

В документации appendTo также говорится: «Если имеется более одного целевого элемента, однако, клонированные копии вставленного элемента будут созданы для каждой цели после первой, и этот новый набор (исходный элемент плюс клоны) будет возвращен». Так что в общем случае это решение МОЖЕТ также создавать копии!

Винсент Пазеллер

Великий! Или вы можете использовать это, чтобы быть более точным в том, куда двигаться$('#nodeToMove').insertAfter('#insertAfterThisElement');

Виктор Августо,

108

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

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

Который я схватил отсюда .

kjc26ster
источник

7

Ну, отсоединение полезно, когда вы хотите удержать элемент и вставить его позже, но в вашем примере вы все равно вставите его немедленно.

Тим Бюте

1

Боюсь, я не совсем понимаю, к чему вы клоните, не могли бы вы предоставить пример кода?

kjc26ster

1

Я имею в виду, prependTo, отсоединяет элемент от его исходного положения и вставляет его в новое. Функция detach, с другой стороны, просто отсоединяет выбранный элемент, и вы можете сохранить его в переменной, чтобы вставить его в DOM в более поздний момент времени. Дело в том, что ваш звонок отсоединения не нужен. Удалите его, и вы добьетесь того же эффекта.

Тим Бют

1

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

hlscalon

96

Как насчет решения 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);

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

Али Бассам
источник

8

Зачем использовать createDocumentFragment вместо простого document.getElementById ('destination'). AppendChild (document.getElementById ('source'))?

Гунар Гесснер

6

@ GunarC.Gessner, если вам нужно изменить исходный объект перед добавлением его к целевому объекту, тогда лучше всего использовать фрагмент, который является воображаемым объектом и не является частью дерева DOM, вы получаете лучшую производительность при изменении исходный объект, когда он был перемещен из своего исходного места (теперь он внутри фрагмента), а не изменяет его в своем первоначальном месте перед добавлением.

Али Бассам

5

Я хочу добавить для актуальности предложения чистого JavaScript-решения. Не следует предполагать, что jQuery всегда используется

Александр Фрадиани

1

Вопрос: При добавлении дочернего узла мы теряем вложенные события?

Jimasun

1

Ответ на мой собственный вопрос - да, он сохраняет прикрепленные события.

Jimasun

95

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

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

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

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

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

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

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

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

sbaaaang
источник

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

Майкл Шепер

32

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

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

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

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

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

Subrahmanyam
источник

20

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

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

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

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

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

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

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

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

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

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

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

Дэн
источник

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>

Развернуть фрагмент

Subodh Ghulaxe
источник

11

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

У 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

HMR
источник

6

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

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

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

Тамас
источник

2

И разбить слушателей событий на перемещенный элемент.

Игорь Помаранский

4

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

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

спецназовская
источник

Это похоже на проблему, связанную с реализацией движка JavaScript. В какой версии браузера и движке JS вы это видите?

Марк Ричман

1

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

спецназ

1

Я бы открыл ошибку с Google на этом.

Марк Ричман

2

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

RayLuo
источник

0

грязное улучшение размера ответа Беким Бакай

div { border: 1px solid ; margin: 5px }

<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>

Развернуть фрагмент

Камил Келчевски
источник

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

Ответы: