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

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

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

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

1. Как добавить объект после другого тега -> при загрузке страницы
2. Добавление тега после другого тега id -> при клике
3. Добавить любой контент после тега -> обращаемся к тегу
4. Добавление тега после другого тега class -> при клике
5. Добавление тега после другого тега name -> при клике
6. Скачать

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




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

Чтобы произошло добавление любого контента после нажатия кнопки - нажмите на неё и вы увидите результат:

нажми на меня



Добавить любой контент после тега по нажатию

Поскольку мы решили рассмотреть все способы, то теперь выберем...

Пусть это будет тег, после этого тега добавим любой контент:

<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
Добавь контент после тега



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



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

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


Добавь контент