appendChild в JavaScript: Добавление элементов на веб-страницу

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

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

HTML:

html

  
Это родительский элемент.

JavaScript:

javascript
const parent = document.getElementById('parent');
const child = document.createElement('p');
child.textContent = 'Это дочерний элемент.';
parent.appendChild(child);

Результат:

html

  
Это родительский элемент.
  
Это дочерний элемент.

Данный код создает новый элемент `

`, задает ему текст и добавляет его в конец элемента с id `parent`.

Также можно использовать метод `appendChild()` для перемещения существующего элемента внутри DOM-структуры, например, из одного родительского элемента в другой.

Пример использования перемещения элемента:

HTML:

html

  
Это родительский элемент 1.


  
Это родительский элемент 2.

JavaScript:

javascript
const parent1 = document.getElementById('parent1');
const parent2 = document.getElementById('parent2');
const child = parent1.querySelector('p');
parent2.appendChild(child);

Результат:

html



  
Это родительский элемент 2.
  
Это дочерний элемент 1.

Данный код выбирает элемент `

` из элемента `parent1` и добавляет его в конец элемента `parent2`, перемещая его из одного элемента в другой.

Также стоит учитывать, что использование метода `appendChild()` может привести к переносу уже существующего элемента в другое место в DOM-структуре, что может привести к нежелательным изменениям в макете или функционале страницы. Поэтому рекомендуется использовать этот метод с осторожностью и только если это необходимо.