Отже зараз у нас порожній body і давайте додамо туди контейнер, з яким будемо працювати.
В консолі браузера ми з вами бачимо цей порожній DOM елемент. І тепер, після того, як ми його створили ми можемо вставити його в DOM. Для цього нам знадобиться метод appendChild.
Тобто ми знайшли спочатку наш елемент app, а потім додали до нього як child елемент наш title.
Якщо ми подивимося в браузер, то ми бачимо, що у нас з'явився новий порожній DOM елемент.
Але ми ж хочемо, щоб наш елемент створювався з потрібними нам класами. Для цього ми можемо поставити класи створеному елементів за допомогою методу className.
Тепер в браузері у нас з'явився в DOM вже елемент з класом. Але тепер хотілося б ще і додати цьому новому елементи текст. Ми можемо використовувати для цього метод innerHTML, який ми з вами вже вивчали раніше.
Тепер ми в браузері бачимо, що у нас додався новий DOM елемент з текстом і класом.
Але є нюанси в тому, як працює метод appendChild. Давайте зараз додамо всередину div app ще один div.
Якщо ми подивимося в браузер, то у нас спочатку вивів content, а потім вже після нього вивів створений елемент. Це відбувається потім, що метод appendChild додає елемент в самий кінець. Це означає, що цей елемент буде додано як останній дочірній елемент в батьку.
Що ж нам тепер робити? Адже ми хочемо вивести спочатку title, а потім контент. У цьому нам допоможе метод .insertBefore. Він працює так само, як і appendChild, але додає DOM елемент на позицію перед зазначеним елементом. Тобто першим аргументом ми вказуємо елемент, який хочемо вставити, а другим перед яким дочірнім елементом ми будемо вставляти.
Так як ми хочемо вставити перед першим дочірнім елементом, то ми можемо використовувати метод .firstChild, щоб знайти перший дочірній елемент у app.
Також іноді нам доводиться видаляти DOM елементи. У цьому нам допоможе метод .removeChild. Ми можемо просто вказати, який елемент ми хочемо видалити з Паренте.
Тобто ми викликаємо на app removeChild, щоб видалити дочірній елемент.
Є також і більш простий варіант запису, коли ми просто викликаємо .remove на елементи.
Цей код відпрацює абсолютно однаково.