Создание элементов с помощью javascript createElement()

Умение динамически создавать и вставлять элементы - одна из ключевых возможностей JavaScript для разработки интерактивных web-приложений. В этой статье мы подробно разберем, как использовать метод document.createElement() для генерации элементов на лету и вставки их в DOM.

Метод document.createElement для создания элементов

Метод document.createElement() позволяет создавать новые элементы DOM динамически через JavaScript. Это очень удобно при необходимости генерировать разметку на лету или добавлять на страницу элементы в ответ на действия пользователя.

Синтаксис метода document.createElement

Синтаксис выглядит так:

let element = document.createElement(tagName);

Где tagName - это строка с названием тега, например "div", "p", "table" и т.д.

Параметры метода

Метод принимает всего один обязательный параметр:

• tagName - строка, обозначающая тег создаваемого элемента, например "div", "span", "table" и т.д.

Возвращаемое значение

Метод возвращает созданный элемент DOM, имеющий тип Node.

Пример создания элемента div

Давайте создадим простой div:

let div = document.createElement("div");

После этого в переменной div будет храниться DOM-элемент <div></div>. Пока что он не добавлен на страницу, а только создан в памяти.

Создание других элементов: p, img, a и т.д.

Метод document.createElement позволяет создавать любые HTML-элементы, просто передавая нужный тег:

let p = document.createElement("p"); // создаст <p></p> let img = document.createElement("img"); // создаст <img /> let a = document.createElement("a"); // создаст <a></a>

Добавление атрибутов к созданному элементу

Чтобы добавить атрибуты к сгенерированному элементу, можно обращаться к нему как к обычному объекту:

let div = document.createElement("div"); div.id = "my-div"; // добавит атрибут id="my-div"

Вставка текста и других элементов в созданный элемент

Чтобы вставить контент в элемент, используйте свойства innerHTML или textContent, либо методы append(), prepend() и др.

let div = document.createElement("div"); div.innerHTML = "<b>текст</b>"; // вставит текст и разметку div.textContent = "Просто текст"; // вставит текст

Создание скриптов и стилей

Для создания тегов <script> и <style> тоже применяется document.createElement:

let script = document.createElement("script"); let style = document.createElement("style");

После этого в них можно записать js-код или css-правила.

Примеры использования в реальных задачах

Рассмотрим несколько примеров применения document.createElement для решения задач:

1. Динамически добавить блок с описанием товара на страницу магазина
2. Сгенерировать таблицу с данными по API запросу
3. Создать несколько ссылок в блоке меню навигации
4. Добавить скрипт со слайдером изображений

Во всех подобных случаях createElement позволяет удобно создавать любые элементы.

Сравнение с innerHTML по производительности

createElement работает быстрее, чем запись разметки через innerHTML, так как избегает лишнего парсинга и перестроения DOM. Однако на практике разница часто незаметна.

Поддержка браузерами

Метод document.createElement поддерживается всеми браузерами, включая IE6+. В старых браузерах для XML-документов вместо него нужно было использовать createElementNS.

Обработка некорректных данных

При передаче некорректного или неподдерживаемого tagName будет создан элемент HTMLUnknownElement.

Частые ошибки и способы их избежать

• Забыть добавить созданный элемент на страницу
• Пытаться создать элементы для невалидных тегов вроде <scriptz>
• Использовать createElement вместо createElementNS для XML в старых браузерах

В целом же, использование document.createElement достаточно простое и понятное.