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

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

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

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

Итак, если нам требуется удалить некий элемент, мы можем воспользоваться методом remove или detach. Оба метода дадут одинаковый результат. Давайте посмотрим на пример:

<div class="container content">
	<ul class="list1">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
	<ul class="list2">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</div>
$('.list1').remove();
$('.list2').detach();

Если теперь обновить страницу, то мы увидим, что блок content действительно пуст, оба списка были удалены.

Если нам необходимо удалить не сам элемент, а его содержимое, тогда пригодится метод empty. Попробуем очистить содержимое первого списка:

$('.list1').empty();

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

И последняя пара методов, которые мы используем в работе, методы replaceWith и replaceAll. Как следует из названий методов, их назначение — заменять одни элементы страницы другими. Например, заменим содержимое обоих наших списков на новое:

$('.list1 li').replaceWith('<li>replaceWith</li>');
$('<li>replaceAll</li>').replaceAll('.list2 li');

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

На этом мы завершим текущую статью и знакомство с 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