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

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

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

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

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