СКРИПТЫ
ТЕГИ:
php (315)
js (234)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
php array (32)
js date (32)
form html (30)
fonts (27)
link (26)
Показать еще :
ruweb.net (25)
online (24)
foto (22)
php file (21)
atom (20)
forum (19)
svg (18)
hosting (17)
php date (17)
board (16)
input (16)
html book (16)
php time (16)
color (15)
js events (14)
js url (14)
htaccess (13)
osclass (13)
img (13)
js time (13)
notepad (13)
select (12)
dw block (12)
знак (12)
info (12)
php path (12)
php img (12)
table (12)
icon (11)
form (11)
jsphp (11)
download (11)
keyboard (11)
yandex (10)
js delete (10)
mouse (10)
hover (9)
dosite (8)
php url (7)
comment (7)
cookie (7)
mysql (6)
browser (6)
year (6)
list (6)
iframe (6)
php get (6)
click (6)
value (5)
mb (5)
adminka (5)
ftp (5)
search (5)
js id (5)
chart (5)
tag a (5)
heading (5)
reg.ru (4)
ucoz (4)
task (4)
week (4)
symbols (4)
нок (4)
submit (4)
js form (4)
ssl (4)
bbcode (4)
pages (4)
console (4)
day (4)
vk (4)
month (4)
base64 (4)
php var (4)
js hash (3)
captcha (3)
js math (3)
numbers (3)
куб (3)
padding (3)
line (3)
js img (3)
vs code (3)
js post (3)
scandir (3)
https (3)
seo (2)
sitemap (2)
prompt (2)
js vars (2)
video (2)
tag hr (2)
youtube (2)
qr kod (2)
google (2)
arrows (2)
typeof (2)
money (2)
рся (2)
height (2)
details (2)
domen (2)
counter (2)
cursor (1)
smile (1)
speed (1)
windows (1)
archive (1)
rutube (1)
нод (1)
scroll (1)
header (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 - Добавление содержимого после элемента
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.015938 секунд. Подробнее