Javascript добавить данные после содержимого тега, но перед закрывающим тегом

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

1. Добавить данные после содержимого тега -> при загрузке страницы
2. Добавление данных после содержимого тега -> при клике


3. Добавить после содержимого тега -> обращаемся к тегу
4. Добавление тега после содержимого тега class -> при клике

Добавить данные после содержимого тега javascript -> при загрузке страницы

Используем тег div.

Нам понадобится в качестве подопытного объект в данном случае создадим тег example , который обозначим бордюром(border), чтобы вы его могли увидеть:

Толщина - 1px.

Начертание solid.

Цвет "red"(красный).

+ Добавим id.

<div style="border: 1px solid red" id=the_first>содержание тега</div>

Нужно обратиться к тегу любым из способов

Ещё нам потребуется метод insertAdjacentHTML .

С позицией beforeend и вторым в скобках добавим новое содержание...

the_first .insertAdjacentHTML('beforeend', '<span style="color:red;">Добавляемое содержание</span>');

Код "beforeend" добавить после содержимого тега.

<div style="border: 1px solid red" id=the_first >содержание тега</div>

<script>

the_first .insertAdjacentHTML('beforeend', '<span style="color:red;">Добавляемое содержание</span>');

</script>

Пример добавления после содержимого в javascript

содержание тега



Добавление данных после содержимого тег -> при клике

Добавление данных после содержимого тега при загрузке рассмотрели выше... далее добавим данные после содержимого тега при клике? для этого вам понадобится:

Для клика будем использовать кнопку button с id .

<button id="to_click">Проверь работу "beforeend"</button>

Нужно обратиться к тегу любым из доступных способов... у нас есть "id"(to_click), поэтому вы можете обратиться к нему напрямую, без прокладок...

+ Используем onclick с функцией...

to_click . onclick = function()


{

Здесь действие -> insertAdjacentHTML


}

Внутри функции прописываем insertAdjacentHTML + id = to_click + позицию = beforeend + собственно контент:

to_click . insertAdjacentHTML("beforeend", "Добавление любого контента");

Соберем весь код вместе:

Код : "добавление данных после содержимого тег -> при клике".

Html :

<button id="to_click">Проверь работу "beforeend"</button>

Javascript

<script>

to_click . onclick = function()

{

to_click . insertAdjacentHTML("beforeend", "<red>Добавление любого контента </red>");

}

</script>

Пример : "добавление данных после содержимого тег -> при клике".

Далее размещаем код : "добавление данных после содержимого тег -> при клике" использующего "beforeend" прямо здесь:

нажми на меня



Добавить данные после содержимого тега по нажатию

Разберем пример "добавления данных после содержимого тега" при клике, обращаясь к тегу...

Придумаем не существующий тег "itsteg", добавим любой контент после всего содержимого... :

<itsteg style="color:blue;">Здесь содержание тега itsteg </itsteg>

Нам опять нужна кнопка, по нажатию на которую и будет добавляться контент после тега:

<button id="to_click1">Добавь контент после тега</button>

Со скриптом - это копия выше идущего пункта с единственным отличием - обратися к тегу посредством (querySelector)-а:

document.querySelector("itsteg"). insertAdjacentHTML...

Соберем код :

Код : "добавление данных после содержимого тег"(обращаемся к тегу).

Html:

<itsteg style="color:blue;">Здесь содержание тега itsteg </itsteg>

<button id="to_click1">Добавь контент после тега</button>

Javascript

<script>

to_click1. onclick = function()

{

document.querySelector("itsteg"). insertAdjacentHTML("beforeend", "Добавление любого контента после тега");

}

</script>

Живой пример добавление контента после тега

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

Здесь содержание тега itsteg
Добавь контент после тега



Добавление после содержимого тега -> при кликеclass

Далее... предыдущая тема под копирку, только будем обращаться к тегу через class, для этого вам понадобится:

Используем div с классом(class) = "its_class" , style применили для цвета...

<div class="its_class" style="color:blue;">Здесь содержание тега с классом class</div>

+ Снова кнопка:

<button id="to_click2">Добавь контент после содержания тега с классом</button>

Обращаемся к тегу по его классу используя (querySelector):

document.querySelector(".its_class"). insertAdjacentHTM...

Соберем весь код:

Код : "добавление данных после содержимого тег"(обращаемся к тегу).

Html :

<div class="its_class" style="color:blue;">Здесь содержание тега с классом class</div>

<button id="to_click2">Добавь контент после тега с классом</button>

Javascript :

<script>

to_click2 . onclick = function()

{

document.querySelector(".its_class"). insertAdjacentHTML("beforeend", "<red>Добавление любого контента после тега с классом </red>");

}

</script>

Пример добавление любого контента после содержимого тега:

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

Здесь содержание тега с классом class
Добавь контент после всего содержимого тега с классом