jQuery рецепт: создание и добавление новых элементов (часть 3)

В этой статье мы продолжим обсуждать тему, которую подняли в предыдущих двух уроках: способы добавление новых элементов на страницу через методы before() и after(). В jQuery есть 2 очень похожих метода: insertBefore() и insertAfter(). Сегодня мы сравним эти методы и узнаем отличия.

В чём разница

В принципе, методы before(), insertBefore(), insert() и insertAfter() предназначены для одних и тех же целей. Давайте рассмотрим следующий пример для выявления отличительных деталей.

HTML:

<ul id="list">
	<li class="list-1">Ut enim ad minim veniam.</li>
	<li class="list-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li class="list-3">Duis aute irure dolor in reprehenderit.</li>
	<li class="list-4">Sunt in culpa qui officia deserunt mollit.</li>
	<li class="list-5">Excepteur sint occaecat cupidatat non proident.</li>
</ul>

С помощью метода .after() мы можем вставить новый элемент после второго элемента списка, следующим способом:

$('.list-2').after('<li class="new-elem">Hello World! This is the new element.</li>');

В этом случае, метод .after() сначала ищет элемент с классом .list-2, а затем содаёт и вставляет новый элемент. При использовании метода .insertAfter() всё происходит с точностью да наоборот.

$('<li class="new-elem">Hello World! This is the new element.</li>').insertAfter('.list-2');

Результат будет один и тот же:

Перемещение элементов

Часто может возникнуть необходимость смены каких-то элементов местами. Давайте переместим первый элемент списка в самый конец с помощью метода .after():

$('.list-5').after($('.list-1'));

Теперь, с помощью .insertAfter() метода :

$('.list-1').insertAfter('.list-5');

Результат:

Выбирайте метод, который вам больше нравится и пользуйтесь им.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bcvjmltggNY/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

jQuery рецепт: создание и добавление новых элементов (часть 3) | | 2013-06-16 01:38:52 | | Статьи Web-мастеру | | В этой статье мы продолжим обсуждать тему, которую подняли в предыдущих двух уроках: способы добавление новых элементов на страницу через методы before() и after(). В jQuery есть 2 очень похожих | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: