Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Jquery - Добавление содержимого после элемента

Поддержи проект!!!

Сегодня разберемся с добавлением элемента(блока) после найденного на странице.

Например, у нас есть вот такой список «li»

<ul class="list l1">

<li class="start no1"> Первая строка </li>

<li class="start no2"> Вторая строка </li>

<li class="start no3"> Третья строка </li>

</ul>

<ul class="list l2">

<li class="start no1"> Первая строка второго блока </li>

<li class="start no2"> Вторая строка второго блока </li>

<li class="start no3"> Третья строка второго блока </li>

</ul>

Нам нужно поставить после каждого найденного элемента наш блок:

<li style="color: red;">Тест</li>

Далее нам понадобится такая конструкция Jquery

$(element).after

Если вы хотите посмотреть, как это написано в документации то вот это так выглядит:

elements.after(content), content.insertAfter(elements)

Теперь все это соберем вместе:

<script>$(".no1").after("<li style=\"color: red;\">Тест</li>");</script>

Результат:

  • Первая строка
  • Вторая строка
  • Третья строка
  • Первая строка второго блока
  • Вторая строка второго блока
  • Третья строка второго блока

P.S.

Не обращайте внимание на кривизну вывода «li» - это особенности форматирования на данной странице…


Вас может еще заинтересовать список тем : #JS | #JS_JQUERY |
Последняя дата редактирования : 2020-01-24 04:24
Название скрипта :Добавление содержимого после элемента
Скрипт № 45.4Ссылка на скачивение: Все скрипты на одной странице
Теги:
Jquery - Добавление содержимогоJquery - Добавление содержимого после элемента

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb