JS метод Document.createElement()

Загальний опис

Метод createElement() є фундаментальним інструментом в об'єктній моделі документа (DOM) мови програмування JavaScript, що відіграє ключову роль у динамічному створенні елементів HTML. Цей метод дозволяє розробникам на льоту генерувати нові елементи, що можуть бути вставлені в DOM документа, дозволяючи тим самим модифікувати структуру веб-сторінки без необхідності повторного завантаження. Основна корисність createElement() полягає у його здатності ефективно реагувати на дії користувача, а також у можливості динамічно змінювати зміст і структуру веб-сторінок, що робить його незамінним інструментом для розробки інтерактивних веб-додатків.

Для використання createElement(), потрібно викликати цей метод на об'єкті document, передаючи в якості аргументу рядок, що вказує на назву тега елемента, який ви бажаєте створити. Наприклад, для створення нового елемента <div>, код буде виглядати так: let div = document.createElement("div");. Створений елемент може бути потім модифікований за допомогою встановлення його атрибутів, таких як id, class або style, і вмісту через властивості, наприклад, textContent або за допомогою методу appendChild(), щоб додати дочірні елементи.

Поглиблюючи використання, можна розглянути додавання складніших елементів у DOM. Припустимо, вам потрібно створити список з кількома елементами. Спочатку створюється елемент <ul>, а потім за допомогою циклу генеруються елементи <li>, кожен з яких додається як дочірній до <ul>:

let ul = document.createElement("ul");
for (let i = 1; i <= 5; i++) {
    let li = document.createElement("li");
    li.textContent = `Елемент ${i}`;
    ul.appendChild(li);
}
document.body.appendChild(ul);

Цей приклад ілюструє, як можна ефективно використовувати createElement() для генерації складних структур HTML. Крім того, метод дозволяє динамічно реагувати на події, наприклад, створюючи нові елементи у відповідь на кліки користувача або інші взаємодії, що значно розширює можливості інтерактивності веб-додатків.

Важливо зауважити, що створені елементи не з'являються на сторінці автоматично. Для їх відображення необхідно вставити елемент у DOM за допомогою методів appendChild() або insertBefore(). Це дозволяє розробникам точно контролювати момент і місце появи елементів на сторінці.

Застосування createElement() відіграє ключову роль у створенні динамічних, взаємодіючих веб-сайтів та веб-додатків, надаючи розробникам могутній інструмент для модифікації веб-сторінок в реальному часі без потреби в перезавантаженні, що сприяє створенню плавного та взаємодіючого користувацького досвіду.

Синтаксис

createElement(tagName)
createElement(tagName, options)

Параметри

*tagName

Рядок, що вказує тип елемента, який буде створено. nodeName створеного елемента ініціалізується значенням tagName. Не слід використовувати кваліфіковані імена (як-от "html:a") з цим методом. При виклику в HTML-документі createElement() перетворює tagName на малі літери перед створенням елемента. У Firefox, Opera та Chrome, createElement(null) працює так само, як createElement("null").

options

Об'єкт з наступними властивостями:

• is: Рядок, що дозволяє вказати ім'я користувацького елемента, який буде створено. Це корисно для визначення елементів Web Components.

Return

element

Повертає новий об'єкт Element, який є екземпляром відповідного класу до заданого тегу. Якщо документ є HTMLDocument, найпоширенішим випадком, повертається новий об'єкт HTMLElement. У випадку, коли метод викликається для інших типів документів, повертається новий об'єкт Element.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створення нового елемента 'p'
var newParagraph = document.createElement('p');

// Додавання тексту до новоствореного елемента 'p'
newParagraph.textContent = 'Це новий абзац, створений динамічно.';

// Додавання новоствореного елемента 'p' до тіла документа
document.body.appendChild(newParagraph);

// Створення нового елемента 'ul' (ненумерований список)
var newList = document.createElement('ul');

// Масив з текстом для кожного елемента списку 'li'
var listItemsText = ['Перший елемент', 'Другий елемент', 'Третій елемент'];

// Створення та додавання елементів 'li' до 'ul' за допомогою циклу
for (var i = 0; i < listItemsText.length; i++) {
  // Створення нового елемента 'li'
  var listItem = document.createElement('li');
  // Додавання тексту до елемента 'li'
  listItem.textContent = listItemsText[i];
  // Додавання елемента 'li' до 'ul'
  newList.appendChild(listItem);
}

// Додавання скомпонованого списку 'ul' до тіла документа
document.body.appendChild(newList);