Как переместить один HTML-элемент внутрь другого с помощью JavaScript?

Использование метода appendChild и insertAdjacentElement

Вы правы: appendChild действительно перемещает элемент, а не копирует его, если элемент уже существует в DOM. Это одно из ключевых свойств DOM API — узел может находиться только в одном месте документа. Когда вы вызываете appendChild для существующего элемента, он автоматически удаляется из предыдущего родителя и вставляется в новый. Вот как это работает:

// Получаем ссылки на элементы
const item = document.getElementById('item');
const container = document.getElementById('container');

// Перемещаем элемент
container.appendChild(item);

После выполнения этого кода элемент #item окажется внутри #container, а из #parent1 он исчезнет. Никаких дополнительных действий не требуется.

Альтернативные методы

Существуют и другие способы перемещения элементов:

• insertBefore() — позволяет вставить элемент перед конкретным дочерним узлом:

const reference = document.getElementById('someChild');
container.insertBefore(item, reference);

• insertAdjacentElement() — даёт больше контроля над позицией вставки:

// Вставить в конец контейнера (аналог appendChild)
container.insertAdjacentElement('beforeend', item);

// Вставить в начало контейнера
container.insertAdjacentElement('afterbegin', item);

Как проверить результат

Вы можете убедиться, что элемент именно перемещён, а не скопирован, проверив parentNode:

console.log(item.parentNode === container); // true — элемент теперь внутри container
console.log(item.parentNode === document.getElementById('parent1')); // false

Важные нюансы

• Если элемент содержит обработчики событий или данные, привязанные через data-*, они сохраняются при перемещении.
• Для перемещения нескольких элементов используйте цикл или DocumentFragment, если нужно минимизировать перерисовки.
• Метод append() (новый, из ES6) также работает, но поддерживается не во всех старых браузерах.

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

// Переместить #item в #container
$('#item').appendTo('#container');

// Или наоборот: вставить контейнер вокруг элемента
$('#container').append('#item');