Создание новых элементов

В библиотеке Zepto.js создание новых DOM-элементов выполняется с помощью функции $(), которая, помимо поиска существующих элементов, может принимать строку HTML для генерации новых узлов. Это позволяет динамически формировать структуру страницы без прямого обращения к document.createElement.

Создание одиночного элемента

Для создания одиночного элемента достаточно передать строку с тегом:

var div = $('<div></div>');

В этом случае div становится объектом Zepto, который поддерживает все методы работы с коллекциями элементов: .append(), .prepend(), .css(), .attr() и другие.

Можно сразу задавать содержимое и атрибуты:

var span = $('<span class="highlight">Текст</span>');

Важно понимать, что созданные таким образом элементы ещё не добавлены в DOM. Для вставки используется один из методов манипуляции DOM:

$('body').append(span);

Создание элементов с вложенной структурой

Zepto позволяет создавать элементы с вложенными тегами, передавая в $() строку с HTML-структурой:

var list = $(`
    <ul id="menu">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
`);

Эта коллекция содержит всех корневых узлов, в данном случае — один <ul>. Для доступа к вложенным элементам можно использовать методы .find() или .children():

var items = list.find('li'); // Получаем все <li>

Атрибуты и свойства при создании

Хотя строка HTML может содержать атрибуты, Zepto поддерживает их программное задание через метод .attr():

var input = $('<input>').attr({
    type: 'text',
    placeholder: 'Введите имя',
    id: 'username'
});

Метод .prop() позволяет задавать свойства, отличающиеся от атрибутов, например checked или disabled:

var checkbox = $('<input>').attr('type', 'checkbox').prop('checked', true);

Работа с содержимым элементов

Для добавления текста или HTML в созданный элемент используется метод .html() или .text():

var paragraph = $('<p></p>').text('Это параграф текста');
var container = $('<div></div>').html('<strong>Жирный текст</strong>');

Разница между ними в том, что .text() экранирует HTML, а .html() вставляет необработанную HTML-структуру.

Клонирование элементов

Для повторного использования созданных элементов можно использовать метод .clone():

var button = $('<button>Нажми</button>');
var copyButton = button.clone(); // Создаёт идентичную копию

Это удобно при создании динамических списков или таблиц, где требуется несколько одинаковых элементов.

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

Zepto позволяет сразу привязать события к вновь созданным элементам:

var link = $('<a href="#">Ссылка</a>').on('click', function(e) {
    e.preventDefault();
    console.log('Ссылка нажата');
});

Метод .on() поддерживает делегирование событий, что особенно полезно для элементов, которые ещё не добавлены в DOM:

$('#container').on('click', 'button', function() {
    console.log('Кнопка внутри контейнера нажата');
});

Сочетание создания и вставки элементов

Часто создают элемент и сразу вставляют его в DOM:

$('<div class="alert">Сообщение</div>').appendTo('body');
$('<li>Новый пункт</li>').prependTo('#menu');

Методы .appendTo() и .prependTo() являются зеркальными аналогами .append() и .prepend(), но позволяют писать код от элемента к контейнеру, а не наоборот.

Использование шаблонных строк

Создание сложных элементов с динамическим содержимым становится удобным с использованием шаблонных строк ES6:

var username = 'Иван';
var card = $(`
    <div class="user-card">
        <h2>${username}</h2>
        <p>Добро пожаловать!</p>
    </div>
`);

Такой подход делает код более читаемым и облегчает формирование HTML с переменными.

Важные особенности

  • Все созданные элементы не добавлены в DOM, пока не используется метод вставки.
  • Методы манипуляции и навешивания событий работают сразу на коллекцию Zepto.
  • Строки HTML должны содержать корректные теги; самозакрывающиеся теги поддерживаются (<input />, <img />).
  • Можно создавать множественные элементы сразу:
var items = $('<li>1</li><li>2</li><li>3</li>');
$('ul').append(items);

Это создаёт коллекцию из трёх элементов <li>, которые можно вставить в DOM одним действием.

Создание новых элементов в Zepto.js предоставляет гибкий инструмент для динамической генерации интерфейса, управления атрибутами, событийной логики и вложенной структуры, что делает библиотеку удобной для компактного и эффективного кода.

Оглавление