DWWEB.RU
СКРИПТЫ

javascript как добавить объект после другого объекта

Вообще тема называется добавить объект после другого объекта! Но добавить можно не только объект и вообще. что такое объект - это див, блок, картинка вообще все, что угодно у чего есть уникальный идентификатор!

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

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

    <example style="border: 1px solid red">Наш блок example</example>
  3. Нам нужна функция, которая сможет обратиться к нашему диву, объекту, тегу - будем использовать querySelector
  4. у нас должна получиться вот такая конструкция:
    example = document.querySelector('example') ;

  5. Ещё нам потребуется метод insertAdjacentHTML
  6. С параметром afterEnd и вторым параметром устанавливаем текст, блок, тег -в общем все, что вы хотите добавить после блока.
    example .insertAdjacentHTML('afterEnd', '<div style="color:red;">Новый абзац</div>');
  7. Соберем весь код вместе:
  8. <example style="border: 1px solid red">Наш блок example</example>

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

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

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

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

Наш блок example

Не забудь !
Название скрипта :Как добавить див после другого дива js
Скрипт № 51.3
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

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