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

Вот моё решение:

Перемещение:

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

Копирование:

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

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

Вы можете использовать обычный JavaScript для перемещения одного элемента в другой контейнер. В вашем случае, чтобы переместить элемент с ID "source" в контейнер с ID "destination" при клике, можно использовать метод appendChild(). Вот пример, как это можно сделать:

addEventListener(
    "click", 
    () => 
        document.getElementById("destination")
            .appendChild(
                document.getElementById("source")
            )
);

Этот код добавляет обработчик события на клик, который при нажатии переместит элемент с ID "source" внутрь элемента с ID "destination".

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

div {
    margin: .1em;
}

#destination {
    border: solid 1px red;
}

#source {
    border: solid 1px gray;
}

Такое оформление улучшает восприятие элементов на странице. Если у вас есть дополнительные вопросы или требуется помощь с другим функционалом, обязательно задайте их!

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

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

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

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

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

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

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

$("#destination").append($("#source").clone());
// и так далее.

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

Чтобы вставить после элемента,

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

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

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

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

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

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

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

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

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

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

Чтобы переместить элемент ВНУТРИ другого элемента, ВЫШЕ всех элементов внутри этого контейнера:

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

Чтобы переместить элемент ВНУТРИ другого элемента, ПОСЛЕ всех элементов внутри этого контейнера:

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