СКРИПТЫ
ТЕГИ:
php (282)
js (149)
html (131)
css (100)
html tags (57)
edit text (39)
jquery (39)
php array (30)
form html (29)
fonts (22)
foto (21)
atom (20)
ruweb.net (20)
forum (19)
hosting (19)
board (17)
svg (17)
Показать еще :
js method (16)
html book (16)
php file (15)
link (15)
osclass (13)
htaccess (13)
color (13)
table (13)
path (12)
online (12)
php date (12)
js delete (11)
input (11)
download (11)
jsphp (11)
icon (11)
notepad (11)
yandex (10)
mouse (10)
url (10)
php img (10)
form (10)
info (9)
task (7)
comment (7)
ftp (7)
cookie (7)
php url (7)
img (7)
dosite (6)
js url (6)
hover (6)
click (6)
iframe (5)
mb (5)
chart (5)
reg.ru (5)
adminka (5)
search (5)
value (5)
php get (5)
js time (4)
select (4)
bbcode (4)
vk (4)
submit (4)
symbols (4)
browser (4)
js form (4)
js copy (4)
js id (4)
console (3)
js post (3)
scandir (3)
ucoz (3)
https (3)
ssl (3)
captcha (3)
vs code (3)
qr kod (2)
sitemap (2)
details (2)
cursor (2)
tag hr (2)
video (2)
height (2)
title (2)
js vars (2)
counter (2)
youtube (2)
seo (2)
domen (1)
archive (1)
numbers (1)
speed (1)
smile (1)
padding (1)
books (1)
google (1)
header (1)
windows (1)
money (1)

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» - это особенности форматирования на данной странице…

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Название скрипта :Добавление содержимого после элемента
Ссылка на скачивание : Все скрипты на одной странице
Теги :
Jquery - Добавление содержимого
Jquery - Добавление содержимого после элемента

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb
Страница загружена за : 0.026431 секунд. Подробнее