Створення елемента HTML в JavaScript

51

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

Все що ми з вами робили до цього, так це працювали з вже готовими елементами DOM дерева, тобто з готовими елементами документа. Ми отримували всі вміст елемента або ж тільки його контент, а також змінювали їх. Однак JavaScript дозволяє створювати і нові елементи в документі. Зробити це можна з допомогою методу createElement. Давайте спробуємо:

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

У документі ми хочемо створити новий тег div. Однак якщо зараз ми подивимося на наш документ через Firebug, то ніякого нового елемента не побачимо, крім підключаються скриптів у body більше нічого немає:

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

Все правильно. Мало створити елемент, потрібно ще вказати, куди саме ми хочемо додати його в документ, а для цього існують інші методи. Наприклад, метод appendChild дозволяє додати елемент в кінець. Спробуємо створити в документі який-небудь елемент і додамо створений динамічно елемент body:

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

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

Як бачимо, новий div додано самим останнім елементом у body і розмістився перед закриваючим тегом body, після підключення скриптів. Але це не дуже добре, хотілося б вставити новий елемент до підключення скриптів. Як це зробити?

Для цього познайомимося з ще одним методом — insertBefore. Даний метод дозволяє додати елемент, переданий першим параметром, перед елементом, який вказаний другим параметром. Спробуємо:

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

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

Упс, не вийшло. Так просто завдання не вирішити. Для того, щоб вставити новий тег перед скриптами, необхідно отримати батьківський елемент цих скриптів в дереві DOM. Допоможе це зробити спеціальне властивість — parentNode, яке ми можемо викликати для змінної script з першим скриптом:

var newDiv = document.createElement(‘div’);
var script = document.getElementsByTagName(‘script’)[0];
var parent = script.parentNode;
parent.insertBefore(newDiv, script);

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

Ось тепер все вийшло. Насправді я вас обдурив, коли говорив, що так просто завдання не вирішити. Але зробив це виключно для того, щоб ви познайомилися з властивістю parentNode. Насправді ж ми знаємо батьківський елемент скриптів — це body. Відповідно, ми нічого не можемо отримувати і відразу звернутися до body:

var newDiv = document.createElement(‘div’);
var script = document.getElementsByTagName(‘script’)[0];
// var parent = script.parentNode;
document.body.insertBefore(newDiv, script);

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