Как создать и добавить элемент?

Создание и добавление новых элементов в документ является одной из самых частых задач при разработке веб-приложений с использованием JavaScript. Этот процесс состоит из двух основных этапов: непосредственное создание узла в памяти браузера и его последующая интеграция в существующее дерево DOM. Для создания нового узла используется метод document.createElement, в который передается строка с именем тега, например, document.createElement('div'). После того как элемент создан, ему можно задать классы, атрибуты и текстовое содержимое, после чего его необходимо вставить на страницу.

Для добавления созданного элемента существует несколько методов в зависимости от того, куда именно его нужно поместить. Классическим и наиболее универсальным методом является parent.appendChild(el), который добавляет узел в самый конец списка дочерних элементов указанного родителя. Если вам нужно разместить элемент перед каким-то конкретным уже существующим дочерним элементом, используется метод parent.insertBefore(el, ref), где первым аргументом передается новый элемент, а вторым — опорный элемент, перед которым произойдет вставка.

Современный стандарт JavaScript предлагает более гибкие и удобные методы для работы с узлами. Методы el.append() и prepend() позволяют добавлять элементы внутрь родительского элемента соответственно в самый конец или в самое начало. Кроме того, методы append и prepend принимают не только узлы, но и обычные текстовые строки, а также позволяют добавлять сразу несколько элементов за один вызов.

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