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

В jQuery можно не только клонировать элементы, но и создавать их непосредственно в документе. Процесс создания элементов довольно прост и использует функцию $().

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

Для создания элемента используется функция $(). Однако, созданный элемент не отобразится на странице, пока не будет добавлен в DOM (Document Object Model). Для добавления используются функции append(), prepend(), insertBefore(), и insertAfter().

append()

Функция append() добавляет элемент в конец целевого элемента. Например, добавим абзац в конец элемента div:

<div></div>

$("div").append($("<p>Текст абзаца</p>"));

Обратите внимание на порядок: сначала указывается целевой элемент (div), затем – функция append() с добавляемым элементом.

prepend()

Функция prepend() аналогична append(), но добавляет элемент в начало целевого элемента.

$("div").prepend($("<p>Текст абзаца</p>"));

insertBefore() и insertAfter()

Функции insertBefore() и insertAfter() вставляют элемент до или после указанного элемента соответственно.

Например, insertBefore():

$("<p>Этот текст будет вставлен до div</p>").insertBefore("div");

В этом примере абзац будет вставлен перед элементом div.

insertAfter():

$("<p>Этот текст будет вставлен после div</p>").insertAfter("div");

Здесь абзац будет вставлен после элемента div.

Разница между append()/prepend() и insertBefore()/insertAfter():

append() и prepend() добавляют элемент внутрь целевого элемента. insertBefore() и insertAfter() вставляют элемент на том же уровне, до или после указанного элемента.

Пример

Имеем HTML-структуру:

<p>Абзац</p>
<div></div>

После применения кода:

$("<p>Абзац 2</p>").insertBefore("div");
$("<p>Абзац 3</p>").insertAfter("div");

Результат будет:

<p>Абзац</p>
<p>Абзац 2</p>
<div></div>
<p>Абзац 3</p>

В качестве селекторов в функциях insertBefore() и insertAfter() можно использовать не только теги, но и классы или ID.

Функции append(), prepend(), insertBefore() и insertAfter() обеспечивают гибкое управление добавлением элементов в DOM, позволяя создавать динамические веб-страницы. Выбор функции зависит от желаемого расположения нового элемента относительно существующих.

jQuery: Создание элементов — Урок 18

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

append()

prepend()

insertBefore() и insertAfter()

Пример