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

В этой статье рассмотрим следующие методы jQuery для управления элементами веб-страницы: jQuery append, appendTo, prepend, prependTo, after, before, remove, replaceWith, replaceAll, clone, wrap, wrapAll, wrapInner, unwrap и is. Вы узнаете, как создать и добавить элемент на страницу, удалить, заменить, копировать и обернуть другим элементом. Также разберем, как проверить наличие элемента на странице и его соответствие определенному селектору.

jQuery создать элемент

Для создания нового элемента с помощью jQuery применяется функция jQuery() или ее псевдоним $(). При создании элемента можно указывать его содержимое, а также различные атрибуты. Первый аргумент функции $() — это строка, содержащая HTML-разметку нового элемента или просто имя тега. Чтобы добавить атрибуты элементу, нужно установить второй параметра для функции в виде объекта, содержащего эти атрибуты.

О том, почему функция $() иногда может не работать, можно почитать в этой статье.

Примеры:

// создание пустого элемента <div>
const someDiv = $('<div>');

// создание нового элемента <p> с текстом "Новый абзац."
const someParagraph = $('<p>Новый абзац.</p>');

// создание кнопки с классом "btn"
const someButton = $('<button>', {
    class: 'btn',
    text: 'Вперёд!'
});

// эту же кнопку можно создать и так
const someButton = $('<button class="btn">Вперёд!</button>');

Результат выполнения примеров выше — объект jQuery, представляющий создаваемый элемент. После создания с объектом элемента можно проводить определенные манипуляции, например, добавить на страницу. Как добавить элемент на страницу в jQuery, мы поговорим в следующем разделе.

jQuery добавить элемент на страницу

В jQuery есть несколько методов добавления элемента на страницу: append, appendTo, prepend, prependTo, after и before.

Методы jQuery append и appendTo

Методы jQuery append и appendTo используются для добавления элемента внутрь выбранных элементов в конец их содержимого. Методы выполняют схожую задачу, но имеют отличия в способе решения этой задачи. Метод append вызывается у элемента-контейнера и принимает добавляемый элемент в качестве параметра. В то время как метод appendTo вызывают у добавляемого элемента, указывая в параметре элемент-контейнер, к которому нужно добавить новый элемент.

// добавим новый блок в конец содержимого элемента .someContainer
$('#someContainer').append('<div>Новый элемент</div>');

// альтернативная запись с помощью метода appendTo
$('<div>Новый элемент</div>').appendTo('#someContainer');

Интерактивный пример:

Исходный код примера:

<article id='someArticle'>
    <p>При нажатии на кнопку новые параграфы добавляются после этого параграфа.</p>
</article>

<button id='someButton'>Добавить</button>

$('#someButton').click(function() {
    const newParagraph = $('<p>Новый параграф добавлен.</p>');

    // можно добавить новый параграф с помощью append
    $('#someArticle').append(newParagraph);

    // или appendTo
    // newParagraph.appendTo($('#someArticle'));
});

HTML-код примера после нажатия на кнопку:

<article id='someArticle'>
    <p>При нажатии на кнопку новые параграфы добавляются после этого параграфа.</p>
    <p>Новый параграф добавлен.</p>
</article>

<button id='someButton'>Добавить</button>

Методы jQuery prepend и prependTo

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

// добавим новый блок в начало содержимого элемента someContainer
$('#someContainer').prepend('<div>Новый элемент</div>');

// альтернативная запись с помощью метода prependTo
$('<div>Новый элемент</div>').prependTo('#someContainer');

Интерактивный пример:

Исходный код примера:

<article id='someArticle'>
    <p>При нажатии на кнопку новые параграфы добавляются перед этим параграфом.</p>
</article>

<button id='someButton'>Добавить</button>

$('#someButton').click(function() {
    const newParagraph = $('<p>Новый параграф добавлен.</p>');

    // можно добавить новый параграф с помощью prepend
    $('#someArticle').prepend(newParagraph);

    // или prependTo
    // newParagraph.prependTo($('#someArticle'));
});

HTML-код примера после нажатия на кнопку:

<article id='someArticle'>
    <p>Новый параграф добавлен.</p>
    <p>При нажатии на кнопку новые параграфы добавляются перед этим параграфом.</p>
</article>

<button id='someButton'>Добавить</button>

Метод jQuery after

Метод jQuery after добавляет новый элемент сразу после указанного элемента.

// добавляем новый div после элемента с идентификатором target
$('#target').after('<div>Новый элемент</div>');

Интерактивный пример:

Исходный код примера:

<article id='someArticle'>
    <h3>Блок article</h3>
    <p>При нажатии на кнопку добавляются новые блоки article с заголовком сразу после текущего блока.</p>
</article>

<button id='someButton'>Добавить</button>

$('#someButton').click(function() {
    $('#someArticle').after('<article><h3>Новый блок article</h3><p>Содержимое нового блока</p></article>');
});

HTML-код примера после нажатия на кнопку:

<article id='someArticle'>
    <h3>Блок article</h3>
    <p>При нажатии на кнопку добавляются новые блоки article с заголовком сразу после текущего блока.</p>
</article>
<article>
    <h3>Новый блок article</h3>
    <p>Содержимое нового блока</p>
</article>

<button id='someButton'>Добавить</button>

Метод jQuery before

Метод jQuery before позволяет добавить элемент перед определенным элементом:

// вставим новый блок перед элементом с идентификатором target
$('#target').before('<div>Новый элемент</div>');

Интерактивный пример:

Исходный код примера:

<article id='someArticle'>
    <h3>Блок article</h3>
    <p>При нажатии на кнопку добавляются новые блоки article с заголовком перед текущим блоком.</p>
</article>

<button id='someButton'>Добавить</button>

$('#someButton').click(function() {
    $('#someArticle').before('<article><h3>Новый блок article</h3><p>Содержимое нового блока</p></article>');
});

HTML-код примера после нажатия на кнопку:

<article>
    <h3>Новый блок article</h3>
    <p>Содержимое нового блока</p>
</article>
<article id='someArticle'>
    <h3>Блок article</h3>
    <p>При нажатии на кнопку добавляются новые блоки article с заголовком перед текущим блоком.</p>
</article>

jQuery удалить элемент

Метод jQuery remove используется для полного удаления выбранных элементов из DOM, вместе со всем их содержимым и привязанными обработчиками событий.

// удалим все элементы класса someElement
$('.someElement').remove();

Для удаления только содержимого элемента, а не его самого, используется метод jQuery empty.

// очистим от содержимого все элементы класса someContainer
$('.someContainer').empty();

Интерактивный пример:

Исходный код примера:

<div id='blocks'>
    <div>Блок 1</div>
    <div>Блок 2</div>
    <div>Блок 3</div>
    <div>Блок 4</div>
</div>

<button id='removeBlocks'>Удалить</button>
<button id='emptyBlocks'>Очистить</button>

$('#removeBlocks').click(function() {
    $('#blocks div').remove();
});

$('#emptyBlocks').click(function() {
    $('#blocks div').empty();
});

HTML-код примера после нажатия на кнопку «Удалить»:

<div id='blocks'></div>

<button id='removeBlocks'>Удалить</button>
<button id='emptyBlocks'>Очистить</button>

HTML-код примера после нажатия на кнопку «Очистить»:

<div id='blocks'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<button id='removeBlocks'>Удалить</button>
<button id='emptyBlocks'>Очистить</button>

Также в jQuery есть еще один метод для удаления элементов — detach. Он удаляет элемент из DOM, сохраняя его данные: атрибуты, события, обработчики событий. При возвращении элемента на страницу он будет иметь все данные, которые у него были на момент удаления.

const someElement = $('#someContainer p').detach();
// здесь можно произвести некоторые действия над элементом и затем вернуть на страницу
$('#someContainer').append(someElement);

jQuery заменить элемент

Чтобы заменить элемент с помощью jQuery, можно воспользоваться методами replaceWith и replaceAll. Оба метода заменяют указанный элемент другим элементом или HTML-разметкой. Методы работают одинаково, но имеют различия в записи.

// заменим все элементы с классом 'old' на новый элемент <div> с классом 'new' и текстом "Новый элемент" с помощью replaceWith
$('.old').replaceWith('<div class="new">Новый элемент</div>');

// альтернативный способ с помощью  replaceAll
$('<div class="new">Новый элемент</div>').replaceAll('.old');

Интерактивный пример:

Исходный код примера:

<article id='someArticle'>
    <p>Это пример демонстрирует работу метода <span>replaceWith</span>. Все слова <span>replaceWith</span> в этом тексте обернуты в тег span. После нажатия на кнопку каждый span с <span>replaceWith</span> будет заменен на <span>replaceWith</span> в теге span, имеющим внутренние стили - полужирное начертание.</p>
</article>

<button id='someButton'>Заменить</button>

$('#someButton').click(function() {
    $('#someArticle p span').replaceWith('<span style="font-weight: 700">replaceWith</span>');
});

HTML-код примера после нажатия на кнопку:

<article id="someArticle">
    <p>Это пример демонстрирует работу метода <span style="font-weight: 700">replaceWith</span>. Все слова <span style="font-weight: 700">replaceWith</span> в этом тексте обернуты в тег span. После нажатия на кнопку каждый span с <span style="font-weight: 700">replaceWith</span> будет заменен на <span style="font-weight: 700">replaceWith</span> в теге span, имеющим внутренние стили — полужирное начертание.</p>
</article>

<button id='someButton'>Заменить</button>

jQuery копировать элемент

Для копирования (клонирования) элементов с помощью jQuery используется метод clone. Этот метод создает точную копию элемента, включая его содержимое, атрибуты и привязанные события.

// сохраним в переменной copy копию элемента с классом someElement
const copy = $('.someElement').clone();

Интерактивный пример:

Исходный код примера:

<article id='someArticle'>
    <p>При нажатии на кнопку этот параграф будет скопирован и копия будет размещена сразу после текущего параграфа.</p>
</article>

<button id='someButton'>Копировать</button> 

$('#someButton').click(function() {
    $('#someArticle p:first-child').clone().appendTo($('#someArticle'));
});

HTML-код примера после нажатия на кнопку:

<article id='someArticle'>
    <p>При нажатии на кнопку этот параграф будет скопирован и копия будет размещена сразу после текущего параграфа.</p>
    <p>При нажатии на кнопку этот параграф будет скопирован и копия будет размещена сразу после текущего параграфа.</p>
</article>

<button id='someButton'>Копировать</button> 

Если вы передадите аргумент true методу clone, он создаст глубокую копию элемента, включая все его потомки.

jQuery обернуть элемент

Для манипуляций с обертками в jQuery существуют следующий методы: wrap, wrapAll, wrapInner, unwrap.

Метод wrap используется для оборачивания определенного элемента в указанный элемент-обертку.

// обернем каждый элемент с классом someElement в блок с классом  someWrapper
$('.someElement').wrap('<div class="someWrapper"></div>');

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

// элементы с классом list-item обернем в один общий элемент ul
$('.list-item ').wrapAll('<ul class="list"></ul>');

Чтобы обернуть содержимое элемента, используется метод wrapInner.

// содержимое каждого тега li будет обернуто в тег span
$('li').wrapInner('<span></span>');

Родителя элемента можно удалить, вызвав метод unwrap.

// удалим родителя всех элементов с классом child
$('.child').unwrap();

В этом интерактивном примере из трех элементов с тегом span мы создаем ненумерованный список и меняем регистр текста на верхний:

Исходный код примера:

<article id='someArticle'>
    <span>Элемент 1</span>
    <span>Элемент 2</span>
    <span>Элемент 3</span>
</article>

<button id='someButton'>Создать список</button> 

$('#someButton').click(function() {
    // обернем все span в один общий ul
    $('#someArticle span').wrapAll('<ul></ul>');
    // обернем каждый span в li
    $('#someArticle span').wrap('<li></li>');
    // обернем содержимое li в span с атрибутом style, устанавливающим тексту верхний регистр
    $('#someArticle li').wrapInner('<span style="text-transform: uppercase;"></span>');
    // удалим span без атрибутов
    $('#someArticle span span').contents().unwrap();
});

HTML-код примера после нажатия на кнопку:

<ul>
    <li>
        <span style="text-transform: uppercase;">Элемент 1</span>
    </li>
    <li>
        <span style="text-transform: uppercase;">Элемент 2</span>
    </li>
    <li>
        <span style="text-transform: uppercase;">Элемент 3</span>
    </li>
</ul>

jQuery проверить на наличие и соответствие элемента

Проверить на наличие элемента можно с помощью свойства length и метода is.

Свойство length возвращает количество найденных элементов, соответствующих определенному селектору. Если не найден ни один элемент, свойство вернет 0.

if ($('.someElement').length) {
    // элемент с классом 'someElement' существует
}

Метод is вернет true или false, в зависимости от того, соответствует ли конкретный элемент указанному селектору.

if ($('.someElement ').is('.active')) {
    // элемент с классом 'someElement' имеет класс "active"
}

// так можно проверить элемент на существование
if ($('*').is('.someElement')) {
    // элемент с классом 'someElement' существует на странице
}