Створення елемента HTML в JavaScript. Частина 2

21

Від автора: вітаю вас, друзі. Продовжуємо роботу з об’єктом document в JavaScript і сьогодні ми навчимося створювати елементи HTML в документі, додавати в них контент, а також оформляти ці елементи за допомогою методів JavaScript. Почнемо.

Отже, в попередній статті ми навчилися створювати елементи HTML і додавати їх в DOM дерево. При цьому ми можемо додати елемент в кінець вибраного батька — для цього використовуємо метод appendChild, так і перед яким-небудь елементом — метод insertBefore допоможе у цьому випадку.

Однак навіщо нам порожній елемент? Було б непогано додати в нього контент, а також стилізувати, оформити створений елемент. Почнемо з додавання вмісту. Тут нам допоможе вже знайоме властивість innerHTML:

var newDiv = document.createElement(‘div’);
newDiv.innerHTML = ‘

Заголовок

Lorem ipsum dolor sit amet.

‘;
var script = document.getElementsByTagName(‘script’)[0];
document.body.insertBefore(newDiv, script);

Создание элемента HTML в JavaScript

Супер, контент додали. Але сам елемент зараз не вписується в розмітку, давайте додамо йому який-небудь клас. Це можна зробити, звернувшись до властивості className:

var newDiv = document.createElement(‘div’);
newDiv.innerHTML = ‘

Заголовок

Lorem ipsum dolor sit amet.

‘;
newDiv.className = ‘container’;
var script = document.getElementsByTagName(‘script’)[0];
document.body.insertBefore(newDiv, script);

Создание элемента HTML в JavaScript

Досить просто, чи не так? Ну і, нарешті, давайте дізнаємося, як можна видалити елемент з DOM дерева. Зробити це допоможе метод removeChild. Припустимо у нас є наступна верстка:

Hello, world!

Lorem ipsum dolor sit amet.

І з неї ми хочемо видалити заголовок. Це можна зробити приблизно так:

var elem = document.getElementsByTagName(‘h1’)[0];
elem.parentNode.removeChild(elem);

Создание элемента HTML в JavaScript

Все вийшло. На цьому ми зупинимося в цій статті. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!