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

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

Как добавить объект после объекта с помощью 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. itstime

    Добавление объекта после другого объекта 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. itstime

    Добавление объекта после другого объекта 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-02-17 07:33
Название скрипта :Как добавить див после другого дива js
Скрипт № 50.3Ссылка на скачивение: Все скрипты на одной странице
Теги:
javascript как добавить объект после другого объекта добавление контента после тега способ поставить тег с контентом после тега

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