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

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

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

Как добавить данные после тега/блока/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

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



Вас может еще заинтересовать список тем : #INSERTADJACENTHTML | #JS | #QUERYSELECTOR | #JS_BOOK |
Последняя дата редактирования : 2020-03-05 06:08
Название скрипта :Как добавить див после другого дива js
Скрипт № 53.3Ссылка на скачивение: Все скрипты на одной странице
Теги:
добавить данные после блокаdivтега javascript как добавить объект после другого тега добавление контента после тега способ поставить тег с контентом после тега

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb