В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js tag (56)
js (244)



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

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


Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.019394 секунд. Подробнее