Перемещение элемента внутрь другого элемента в JavaScript

Существуют ситуации, когда в процессе работы с веб-страницей нужно переместить один HTML-элемент внутрь другого. Это может быть полезно, например, при динамическом изменении структуры страницы. Рассмотрим простой пример: имеется два div элемента.

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

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

И задача стоит в том, чтобы переместить элемент с идентификатором source внутрь элемента с идентификатором destination. Это можно сделать с помощью JavaScript.

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

Одним из способов перемещения элемента является использование метода appendChild(). Данный метод добавляет узел в конец списка дочерних узлов родительского элемента. Если узел уже есть в документе, то он будет перемещен.

var source = document.getElementById('source');
var destination = document.getElementById('destination');
destination.appendChild(source);

После выполнения этого кода, структура HTML будет выглядеть следующим образом:

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

Использование метода insertBefore()

Еще один способ — использование метода insertBefore(). Этот метод позволяет вставить узел перед указанным узлом. Если второй параметр равен null, то метод будет работать как appendChild().

var source = document.getElementById('source');
var destination = document.getElementById('destination');
destination.insertBefore(source, null);

Аналогично, после выполнения этого кода элемент source будет перемещен внутрь destination.

Таким образом, в JavaScript существуют встроенные методы, которые позволяют легко и быстро перемещать элементы внутри DOM-структуры веб-страницы.