Создавайте HTML/CSS элементы с помощью JavaScript

ElementJS — это легковесная библиотека от ГК "Журавлев и партнеры" для динамического создания и управления HTML элементами и стилями с помощью чистого JavaScript.

Начать работу Документация

// Простое создание страницы
let
container = ['type: div', 'class: container'];
let
main = ['type: div', 'class: main', 'nested: container'];


ElementJS.createPage([container, main])

Мощные возможности ElementJS

Библиотека предоставляет простой и интуитивно понятный API для динамического создания и управления элементами на вашей веб-странице.

Декларативный синтаксис

Создавайте элементы с помощью простых массивов конфигурации. Нет необходимости в сложных цепочках методов.

Вложенная структура

Легко определяйте вложенные элементы с помощью свойства 'nested'. Создавайте сложные иерархии DOM-элементов.

Асинхронное создание

Загрузка страницы через асинхронный запрос

Фиксированный дизайн

Элементы не адаптируются при изменении разрешения

Модульность

Создавайте независимые компоненты с помощью массивов

Без шаблонов

Чистый инструмент для создания HTML/CSS через JS, без готовых компонентов.

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

Узнайте, как ElementJS может упростить вашу разработку веб-интерфейсов.

                        
                        // Создание адаптивной страницы с вложенными элементами
                    
                        let  container = ['type: div', 'class: container'];
                    
                        let  main = ['type: div', 'class: main', 'nested: container'];
                    
                        ElementJS.createPage([container, main]).then(() => {
                    
                          console.log('Адаптивная страница создана!');
                    
                        });

Результат выполнения примера появится здесь...

                        
                        // Создание формы с различными элементами
                    
                        let  form = [
                    
                          ['type: form', 'class: user-form', 'id: signupForm', 'nested: user-form'],
                    
                          ['type: input', 'class: user-input', 'placeholder: Введите имя', 'name: username', 'nested: user-form'],
                    
                          ['type: input', 'class: user-input', 'placeholder: Введите email', 'name: email', 'nested: user-form'],
                    
                          ['type: button', 'text: Отправить', 'class: submit-btn', 'nested: user-form']
                    
                        ];
                    
                        ElementJS.createPage(form).then(() => {
                    
                          console.log('Форма успешно создана. Стили были автоматически добавлены');
                    
                        });

Результат выполнения примера появится здесь...