В предыдущих статьях по jQuery мы разобрали возможности по выборке и работе с элементами из этой выборки. А в этом материале разберём важные возможности по добавлению и удалению элементов на jQuery .
В предыдущих статьях по jQuery мы разобрали возможности по выборке и работе с элементами из этой выборки. А в этом материале разберём важные возможности по добавлению и удалению элементов на jQuery.
Начнём мы с добавления элементов на jQuery:
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
<p class="link"></p>
<p class="link"></p>
<div id="links"></div>
<script type="text/javascript">
$("p.link").append("<a href='#'>Ссылка внутри тега p</a>"); // Добавляем новые ссылки внутрь тега <p class="link">
$("a").not("p.link a").appendTo($("#links")); // Переносим все ссылки, за исключением тех, которые находятся внутри тега <p class="link">, в блок #links
$("#links a").wrap("<p></p>"); // Обёртываем все ссылки внутри #links в тег <p>
/* Создание новых элементов и добавление их на страницу */
$("<span>Новый элемент 1</span>").insertAfter("div"); // Вставка span после всех div
$("<span>Новый элемент 2</span>").insertBefore("div"); // Вставка span перед всеми div
$("<span>Новый элемент 3</span>").appendTo("div"); // Вставка span внутрь div самым последним элементом
$("<span>Новый элемент 4</span>").prependTo("div"); // Вставка span внутрь div самым первым элементом
$("<span>Новый элемент 5</span>").insertAfter("div a:eq(1)"); // Вставка span сразу после 1-го (нумерация идёт с 0) тега a внутри div
</script>
Думаю, что код и так достатоно хорошо прокомментирован и не нуждается в разъяснении. Теперь разберём удаление элементов на jQuery, тут всё ещё проще:
<div class="block_1"><span>Блок 1</span></div>
<div class="block_1"><span>Блок 1</span></div>
<div class="block_2"><span>Блок 2</span></div>
<script type="text/javascript">
$(".block_1").empty(); // Очичащем содержимое элементов с class="block_1"
$(".block_2").remove(); // Удалем полностью элементы с class="block_2"
</script>
По сути, удаление бывает двух типов: очищение содержимого (это делает метод empty()) и полное удаление элемента (это делает метод remove()).
Это всё самое важное, что касается добавления и удаления элементов на jQuery.
