phpjsJqueryhtmlcssblog

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

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


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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---