Вставка контента в разные позиции

Bliss.js предоставляет набор удобных методов для динамической работы с DOM, включая добавление элементов в разные позиции относительно существующих узлов. Основные методы вставки ориентированы на конец, начало, до и после выбранного элемента.

Вставка в конец элемента: append

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

Пример:

let container = Bliss('#container');
container.append('<p>Новый параграф в конце контейнера</p>');
  • Если передан HTML-код, он автоматически преобразуется в DOM-элемент.
  • Можно добавлять несколько элементов одновременно:
container.append('<span>Первый</span>', '<span>Второй</span>');
  • Можно использовать для добавления уже существующих узлов:
let newDiv = document.createElement('div');
newDiv.textContent = 'Созданный вручную элемент';
container.append(newDiv);

Вставка в начало элемента: prepend

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

Пример:

container.prepend('<p>Этот параграф будет первым</p>');
  • Поддерживается добавление сразу нескольких элементов:
container.prepend('<span>Начало1</span>', '<span>Начало2</span>');
  • Можно вставлять существующие DOM-узлы:
let firstItem = document.createElement('li');
firstItem.textContent = 'Первый элемент списка';
Bliss('ul#menu').prepend(firstItem);

Вставка перед элементом: before

Метод before позволяет вставить новый элемент не внутрь, а перед выбранным узлом в DOM.

Пример:

let reference = Bliss('#reference');
reference.before('<div>Элемент перед reference</div>');
  • Поддерживается добавление нескольких элементов подряд:
reference.before('<span>До1</span>', '<span>До2</span>');
  • Можно использовать существующие узлы:
let newNode = document.createElement('p');
newNode.textContent = 'Текст перед reference';
reference.before(newNode);

Вставка после элемента: after

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

Пример:

reference.after('<div>Элемент после reference</div>');
  • Несколько элементов можно добавить за один вызов:
reference.after('<span>После1</span>', '<span>После2</span>');
  • Работает с уже созданными DOM-узлами:
let anotherNode = document.createElement('p');
anotherNode.textContent = 'Текст после reference';
reference.after(anotherNode);

Особенности работы с массивами и коллекциями

Bliss.js поддерживает операции с множественными элементами, выбранными через селектор. Методы вставки применяются к каждому элементу коллекции.

Bliss('ul li').append('<span>Добавлено к каждому элементу списка</span>');
  • При добавлении одного узла в несколько мест он перемещается, а не клонируется.
  • Чтобы вставить одинаковый контент в несколько мест, нужно использовать HTML-строку или клонировать узел:
let node = document.createElement('div');
node.textContent = 'Уникальный узел';
Bliss('ul li').each(el => el.appendChild(node.cloneNode(true)));

Вставка с текстовым содержимым

Все методы Bliss.js корректно обрабатывают строки:

  • Строки с HTML автоматически преобразуются в DOM.
  • Чистый текст можно вставлять через метод text или через append/prepend с экранированием.
container.append('Простой текст'); // вставится как текстовый узел
container.append('<strong>HTML-тег</strong>'); // вставится как HTML

Различия между методами

Метод Позиция вставки Внутрь/Вне элемента
append Конец выбранного элемента Внутрь
prepend Начало выбранного элемента Внутрь
before Перед выбранным элементом Вне
after После выбранного элемента Вне

Работа с событиями при вставке

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

container.append('<button>Кликни меня</button>')
         .find('button')
         .on('click', () => console.log('Нажато'));
  • Это позволяет создавать динамические интерфейсы без необходимости отдельного поиска новых узлов.

Клонирование и повторное использование элементов

Bliss.js автоматически перемещает существующие узлы, если они вставляются в другое место. Для повторного использования:

let node = document.createElement('div');
node.textContent = 'Многоразовый блок';
Bliss('#container1').append(node.cloneNode(true));
Bliss('#container2').append(node.cloneNode(true));
  • Использование cloneNode(true) сохраняет все вложенные элементы и их свойства.

Итоговая структура добавления элементов

  1. Определить позицию: начало, конец, до, после.
  2. Передать HTML-строку, текст или существующий узел.
  3. Для нескольких элементов использовать массив или несколько аргументов.
  4. При работе с коллекциями узлов учитывать перемещение существующих элементов.

Bliss.js обеспечивает единообразный синтаксис и гибкую работу с динамическим контентом, что позволяет создавать сложные интерфейсы с минимальным кодом и без ручного управления узлами DOM.

Оглавление