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

javascript как добавить содержимое после другого блока|div|тега пример

Как добавить данные после тега/блока/div с помощью javascript. Добавлять данные можно после любого div/блок/тег, картинки, вообще после всего, если можно обратиться к тегу!

Вчера мы добавляли впереди, сегодня будем добавлять контент после блока, дива, тега и т.д. Чтобы явственно представлять, куда мы будем добавлять сделаем маленькую иллюстрацию, стрелкой укажем, что собственно покажет куда будем добавить данные после тега:
javascript как добавить содержимое после другого блока|div|тега пример

Всё о добавлении тега после другого тега с примерами

  1. Как добавить объект после другого тега -> при загрузке страницы
  2. Добавление тега после другого тега id -> при клике
  3. Добавить любой контент после тега -> обращаемся к тегу
  4. Добавление тега после другого тега class -> при клике
  5. Добавление тега после другого тега name -> при клике
  6. Скачать можно здесь

  1. Как добавить объект после другого тега javascript -> при загрузке страницы

    Нам понадобится в качестве подопытного объект в данном случае создадим тег example , который обозначим бордюром. чтобы вы его могли увидеть:

    <example style="border: 1px solid red">Наш блок example</example>

    Нам нужна функция, которая сможет обратиться к нашему диву, объекту, тегу - будем использовать querySelector у нас должна получиться вот такая конструкция:

    example = document.querySelector('example') ;

    Ещё нам потребуется метод insertAdjacentHTML

    С параметром afterEnd и вторым параметром устанавливаем текст, блок, тег -в общем все, что вы хотите добавить после блока.
    example .insertAdjacentHTML('afterEnd', '<div style="color:red;">Новый абзац</div>');

    Соберем весь код вместе:

    <example style="border: 1px solid red">Наш блок example</example>

    <script> example = document.querySelector('example') ;

    example .insertAdjacentHTML('afterEnd', '<div style="color:red;">Новый абзац</div>');</script>

    Результат добавление тега после тега в javascript

    Наш блок example

    Теперь расположим данный код на странице и как видим, наш новый объект добавился после нашего же определенного тега через javascript


  2. Добавление тега после другого тега id -> при клике

    Добавление тега, тега, элемента после другого тега рассмотрели,

    Если ид(либо тег) не уникальный, то событие будет происходить с первым на страницу!

    теперь, пусть это будет кнопка button с каким-то id = to_click

    <button id="to_click">нажми на меня</button>

    Чтобы отследить нажатие по кнопке нам понадобится onclick с функцией...

    to_click . onclick = function()
    {
    Здесь действие -> insertAdjacentHTML
    }

    В действие ставим insertAdjacentHTML + id тега(to_click) + первое значение afterEnd + собственно контент:

    to_click . insertAdjacentHTML("afterEnd", "<red>Добавление любого контента </red>");

    Соберем весь код вместе:

    <button id="to_click">нажми на меня</button>

    <script>

    to_click . onclick = function()

    {

    to_click . insertAdjacentHTML("afterEnd", "<red>Добавление любого контента </red>");

    }

    </script>

    Обращаю ваше внимание на данный код чуть выше!
    Вопрос - почему перед to_click . в обоих случаях не стоит querySelector или getElementById и рекомендую этот код сравнить с тем, что будет вниже идущем пункте!

    Живой пример добавление контента после тега, элемента, div по нажатию кнопки:

    Чтобы произошло добавление любого контента после нажатия кнопки - нажмите на неё и вы увидите результат:


  3. Добавить любой контент после тега по нажатию

    Поскольку мы решили рассмотреть все способы, то теперь выберем...

    Пусть это будет тег, после этого тега добавим любой контент:

    <itsteg style="color:blue;">Здесь содержание тега itsteg </itsteg>

    Нам опять нужна кнопка, по нажатию на которую и будет добавляться контент после тега:

    <button id="to_click1">Добавь контент после тега</button>
    Со скриптом - это копия выше идущего пункта с единственным отличием с добавлением document.querySelector:
    document.querySelector("itsteg"). insertAdjacentHTML...

    Соберем весь код вместе:

    <itsteg style="color:blue;">Здесь содержание тега itsteg </itsteg>

    <button id="to_click1">Добавь контент после тега</button>

    <script>

    to_click1. onclick = function()

    {

    document.querySelector("itsteg"). insertAdjacentHTML("afterEnd", "Добавление любого контента после тега");

    }

    </script>

    Живой пример добавление контента после тега

    для того, чтобы вживую увидеть добавление любого контнета после тега нажмите нижнюю кнопку:

    Здесь содержание тега itsteg


  4. Добавление тега после другого тега class -> при клике

    Теперь предположим, что у блока есть класс и мы должны добавить что-то после тега с этим классом!

    Создадим какой-то div с классом(class) = "its_class" . style применили для цвета...

    <div class="its_class" style="color:blue;">Здесь содержание тега с классом class</div>

    + Опять кнопка:

    <button id="to_click2">Добавь контент после тега с классом</button>

    Здесь мы видим, что внутри скобок, в отличии от выше идущего пункта, добавилась точка, что означает, что это класс:

    document.querySelector(".its_class"). insertAdjacentHTM...

    Соберем весь код добавления контента после тега с классом:

    <div class="its_class" style="color:blue;">Здесь содержание тега с классом class</div>

    <button id="to_click2">Добавь контент после тега с классом</button>

    <script>

    to_click2 . onclick = function()

    {

    document.querySelector(".its_class"). insertAdjacentHTML("afterEnd", "<red>Добавление любого контента после тега с классом </red>");

    }

    </script>

    Живой пример добавление любого контента после блока с классом:

    Для того, чтобы добавить любой контент после тега нажмите по ниже идущей кнопке:

    Здесь содержание тега с классом class


  5. Добавление тега после другого тега name -> при клике

    Как добавить контент после тега input с name

    Нам потребуется input с именем(name)

    <input name="its_input" placeholder="its_input"><br>

    Снова кнопка:

    <button id="to_click3">Добавь контент</button>

    Скрипт абсолютно тоже самое, лишь разница в содержании скобок:

    document.querySelector("input[name=\'its_input\']"). insertAdjacentHTML...

    Соберем весь код вместе:

    <input name="its_input" placeholder="its_input"><br>

    <button id="to_click3">Добавь контент</button>

    <script>

    to_click3 . onclick = function()

    {

    document.querySelector("input[name=\'its_input\']"). insertAdjacentHTML("afterEnd", "<red>Добавление любого контента после тега с классом </red>");

    }

    </script>

    Живой пример добавление контента после тега input с name

    Чтобы увидеть добавление контента в реальном времени нажмите кнопку и вы увидите результат:


Можете не благодарить, лучше помогите!
Название скрипта :Как добавить див после другого дива js
Ссылка на скачивание : Все скрипты на одной странице
Теги :
добавить данные после блока
div
тега
javascript как добавить объект после другого тега
добавление контента после тега
способ поставить тег с контентом после тега
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.021378 секунд. Подробнее