Мелочи jQuery

Материал из rrv-wiki
Перейти к навигации Перейти к поиску

Добавление и удаление элементов на jQuery

Добавления элементов на jQuery примеры:

<a href="#">Ссылка1</a>
 <a href="#">Ссылка2</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>