Добавление и удаление элементов на 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.
-
Создано 16.10.2013 22:05:25
-
Михаил Русаков
Комментарии (5):
Нехорошо комментарии-то удалять!
Ответить
Я не считаю, что комментарий "'в внутри' - вы уверены, что так будет правильно?" является тематическим к статье. Когда мне пишут об орфографических ошибках, я их всегда исправляю. И не вижу смысла в сохранении подобных комментариев.
Ответить
Если такая конструкция, $('.a , .b').remove(); то удаляются элементы имеющие класс a или b. Я правильно понял?
Ответить
Спасибо за статью, Миша! Как всегда, предельно лаконично, а главное — понятно и полезно. :) Отдельный респект за комментарии к коду!
Ответить
Здравствуйте Михаил. Делал ваш урок по jquery и не смог разобраться в чем дело. Удаляю элемент, а он тут же появляется вновь. Подскажите пожалуйста в чем у меня проблема. Это мой код. <!doctype html> <html> <head> <title>Удаление элементов</title> <meta charset="utf-8"> <script src="jquery.js"></script> <style> img {width: 300px;} </style> <script> function fun(a){ var str = "#" + a; alert(str); $(str).remove(); } </script> </head> <body> <div id="a"><img src="array.jpg"></div> <div><a href="" onclick="fun('a')">Удалить</a></div> <div id="b"><img src="pink_floyd.jpg"></div> <div><a href="" onclick="fun('b')">Удалить</a></div> <div id="c"><img src="stroustrup.jpg"></div> <div><a href="" onclick="fun('c')">Удалить</a></div> </body> </html>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.