JS appendChild: добавление нового элемента на страницу

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

Синтаксис метода appendChild() выглядит следующим образом:

parentElement.appendChild(newElement);

где parentElement - это родительский элемент, к которому мы хотим добавить новый элемент, а newElement - это новый элемент, который мы хотим добавить.

Рассмотрим пример. Допустим, у нас есть следующий HTML-код:

html

  
Это первый абзац
  
Это второй абзац

Хотим добавить новый абзац в конец div-контейнера с id="parent-element". Можно сделать это, вызвав метод appendChild() на родительском элементе:

js
// Найдём родительский элемент, к которому мы хотим добавить новый элемент
let parentElement = document.getElementById('parent-element');
// Создадим новый элемент
let newElement = document.createElement('p');
// Напишем текст для нового элемента
let textNode = document.createTextNode('Это третий абзац');
// Добавим текстовый узел в новый элемент
newElement.appendChild(textNode);
// Добавим новый элемент в конец родительского элемента
parentElement.appendChild(newElement);

Результатом выполнения этого кода будет новый абзац в конце списка:

html

  
Это первый абзац
  
Это второй абзац
  
Это третий абзац

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

js
let oldParent = document.getElementById('old-parent-element');
let newParent = document.getElementById('new-parent-element');
let elementToMove = document.getElementById('element-to-move');
// Перемещаем элемент в конец нового родительского элемента
newParent.appendChild(elementToMove);

Важно понимать, что при использовании метода appendChild() элемент переносится в новое место в DOM-дереве. Если элемент уже находится на странице и мы пытаемся добавить его ещё раз, будет проигнорировано: элемент не будет добавлен дважды.