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

Дата публикации: 2016-12-26

Манипуляция с элементами в 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'));
});

$(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'));
});

$(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');
});