<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Добавление и удаление элементов на 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

lev_100rus lev_100rus 17.10.2013 18:03:28

Нехорошо комментарии-то удалять!

Ответить

Admin Admin 17.10.2013 21:59:21

Я не считаю, что комментарий "'в внутри' - вы уверены, что так будет правильно?" является тематическим к статье. Когда мне пишут об орфографических ошибках, я их всегда исправляю. И не вижу смысла в сохранении подобных комментариев.

Ответить

SV SV 19.11.2015 13:55:24

Если такая конструкция, $('.a , .b').remove(); то удаляются элементы имеющие класс a или b. Я правильно понял?

Ответить

vegas vegas 23.06.2015 12:43:01

Спасибо за статью, Миша! Как всегда, предельно лаконично, а главное — понятно и полезно. :) Отдельный респект за комментарии к коду!

Ответить

rustttam rustttam 25.01.2018 19:33:39

Здравствуйте Михаил. Делал ваш урок по 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>

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.