Манипуляция с элементами в jQuery. Часть 2

Манипуляция с элементами в jQuery

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

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

Для того, чтобы добавить новый элемент в начало выбранного элемента, jQuery предлагает методы prepend и prependTo. Синтаксис их предельно прост. Метод prepend принимает параметром контент, который мы хотим вставить, а метод prependTo в качестве параметра ожидает элемент, в который мы добавляем контент. Разницу использования методов и суть их работы будет проще понять на примере.

$(function(){
 $('.content ul').prepend('<li><a href="#">Новый элемент prepend</a></li>');
 $('<li><a href="#">Новый элемент prependTo</a></li>').prependTo($('.content ul'));
});

Манипуляция с элементами в jQuery

Оба метода отработают абсолютно одинаково — добавят новый контент в начало выбранного элемента. Фактически они являются синонимами и вы можете выбирать любой из них для решения озвученной задачи. Хотя, на мой взгляд, метод prepend более понятен в использовании, и я рекомендую выбрать его.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Теперь посмотрим, как вставить контент в конец элемента. В этом нам помогут методы append и appendTo. Принцип их работы точно такой же, как и методов prepend и prependTo, т.е. они являются синонимами и выполняют одну задачу. Пример, который все объяснит:

$(function(){
 $('.content ul').append('<li><a href="#">Новый элемент append</a></li>');
 $('<li><a href="#">Новый элемент appendTo</a></li>').appendTo($('.content ul'));
});

Манипуляция с элементами в jQuery

Как видите, все просто. Добавлять контент внутрь элемента не составит труда. Теперь посмотрим, как в jQuery можно добавить контент перед или после элемента. Для того, чтобы добавить что-то перед элементом, используют методы before или insertBefore. А чтобы добавить контент после элемента следует использовать методы after или insertAfter. Работают они по тому же принципу, что и предыдущие методы. Например, добавим параграфы перед и после списка.

$(function(){
 $('.content ul').before('<p>Параграф before</p>');
 $('<p>Параграф insertBefore</p>').insertBefore('.content ul');
 $('.content ul').after('<p>Параграф after</p>');
 $('<p>Параграф insertAfter</p>').insertAfter('.content ul');
});

Манипуляция с элементами в jQuery

На этом мы завершим текущую статью. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree