Вставка элементов в документ

Dom7 — это легковесная библиотека для работы с DOM, популярная в экосистеме фреймворка Framework7. Она предоставляет удобные методы для динамического создания, вставки и управления элементами на странице. Основная идея заключается в использовании цепочек вызовов, похожих на jQuery, что позволяет писать лаконичный и читаемый код.

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

Элементы в Dom7 создаются с помощью строки HTML и метода $(...). Любая HTML-строка, переданная в $, будет интерпретирована как элемент DOM:

const newDiv = $('<div class="box">Привет</div>');

В результате переменная newDiv содержит объект Dom7, который можно использовать для дальнейших операций: вставки, изменения содержимого, добавления обработчиков событий.

Методы вставки элементов

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

append()

Добавляет элементы внутрь выбранного родителя, после существующего содержимого.

$('.container').append('<p>Новый параграф</p>');

const newItem = $('<li>Элемент списка</li>');
$('ul').append(newItem);

Особенности:

  • Может принимать строку HTML, объекты Dom7 или DOM-элементы.
  • Поддерживает добавление нескольких элементов одновременно:
$('ul').append('<li>1</li><li>2</li>');

prepend()

Вставляет элементы в начало выбранного контейнера, перед существующим содержимым.

$('.container').prepend('<h1>Заголовок</h1>');

before() и after()

Методы before() и after() вставляют элементы снаружи выбранного узла, соответственно до и после него в DOM:

$('.box').before('<p>Перед блоком</p>');
$('.box').after('<p>После блока</p>');

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

insertBefore() и insertAfter()

Работают аналогично before() и after(), но вызываются на вставляемом элементе:

const newDiv = $('<div>Новый блок</div>');
newDiv.insertBefore('.box'); // вставит новый блок перед элементом с классом box

Манипуляция содержимым

Dom7 поддерживает изменение содержимого и структуры элементов без прямой работы с innerHTML:

html()

Возвращает или задаёт HTML-содержимое элемента:

$('.content').html('<p>Новый контент</p>');

const currentHTML = $('.content').html();

text()

Аналогично html(), но работает только с текстом:

$('.content').text('Только текст');

appendTo() и prependTo()

Позволяют вставлять текущий элемент в другой контейнер, что удобно для цепочек вызовов:

$('<p>Привет</p>').appendTo('.container');
$('<p>Начало</p>').prependTo('.container');

Вставка нескольких элементов одновременно

Dom7 позволяет оперировать массивами элементов и строками HTML:

const items = [
  $('<li>Элемент 1</li>'),
  $('<li>Элемент 2</li>'),
  $('<li>Элемент 3</li>')
];

$('ul').append(items);

Методы append, prepend, before, after автоматически обрабатывают массивы и объекты Dom7.

Удаление элементов после вставки

Иногда требуется вставить элемент и затем удалить его из DOM. Dom7 предоставляет метод remove():

const temp = $('<div>Временный блок</div>').appendTo('body');
setTimeout(() => {
  temp.remove();
}, 2000);

Работа с клонированием

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

const card = $('<div class="card">Карточка</div>');
$('.container1').append(card.clone());
$('.container2').append(card.clone());

Без clone() элемент будет перемещён, а не скопирован.

Комбинирование методов вставки и событий

Dom7 поддерживает цепочки вызовов, что позволяет одновременно вставлять элементы и назначать обработчики событий:

$('<button>Клик</button>')
  .appendTo('.container')
  .on('click', function() {
    console.log('Кнопка нажата');
  });

Оптимизация вставки большого количества элементов

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

const fragment = [];
for (let i = 0; i < 1000; i++) {
  fragment.push($(`<li>Элемент ${i}</li>`));
}
$('ul').append(fragment);

Итоговое понимание

Вставка элементов в Dom7 сводится к пониманию двух принципов:

  1. Относительное позиционирование — внутрь (append/prepend) или снаружи (before/after).
  2. Гибкость объектов — Dom7 умеет работать как с HTML-строками, так и с существующими элементами, включая массивы и клонирование.

Эти инструменты позволяют создавать динамический интерфейс с минимальным количеством кода, сохраняя читаемость и управляемость DOM.

Оглавление