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

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

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

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

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

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

  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

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



Последняя дата редактирования : 18.12.2020 22:45
Название скрипта :Как добавить див после другого дива js
Скрипт № 56.3Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
добавить данные после блокаdivтега javascript как добавить объект после другого тега добавление контента после тега способ поставить тег с контентом после тега

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

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
29/04/2021 01:46
Реанимирована страница о "шаблонах в DREAMWEAVER"!Эта программа была основной для редактирования моих сайтов на…
подробнее.
Марат :
23/04/2021 04:35
Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинку по…
подробнее.
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.