Jump to content
Уважаемые пользователи! Сайт находится ещё в режиме разработки, но большая часть функционала уже доступна! ×
  • Sign Up

Как с помощью js добавить html код в div


Печенег

2254 views

 Share
Followers 0

Добавить можно, естественно, не только в DIV элемент на сайте, но и совершенно в любую другую конструкцию вашего HTML сайта.

В примере будет рассмотрено 2 варианта вставки текста в html с помощью javascript и дополнительно вариант вставки кода через функцию, которая запускается по нажатию на кнопку.

1. На чистом JavaScript без jQuery

Пример HTML - текст будет добавлен в тег <div> с классом demo 

<div id="description_id">
  <div class="demo"></div>
  <p>Выше текст добавленный на чистом JavaScript</p>
</div>

Пример CSS (для моего примера не более)

#description_id {
  padding: 50px 0;
  font-family: roboto, arial;
}
p {
  font-weight: 600;
}

Код JavaScript без jQuery

/* на чистом JavaScript */
document.querySelector('.demo').innerHTML = "Подарочный сертификат на 10 000 руб. <a href='https://ostogramm.ru/redirect/?to=&anchor='>Скачать</a>";

 

2. На JavaScript используя библиотеку jQuery

Пример HTML - текст будет добавлен в тег <div> с классом description_class 

<div id="description_id">
  <div class="description_class"></div>
  <p>Выше текст добавленный с помощью JavaScript и библиотеки jQuery</p>
</div>

Код JavaScript используя jQuery

/* используя jQuery */
$(".description_class").append("Подарочный сертификат на 15000 руб. <a href='https://ostogramm.ru/redirect/?to=&anchor='>Скачать</a>");

 

3. На JavaScript вставляем текст в html по нажатию на кнопку / ссылку

Пример HTML - текст будет добавлен в тег <div> с классом demo 

<div id="description_id">
  <div id="demo"></div>
  <p>Выше появится текст добавленный с помощью вызова функции JavaScript</p>
  <button onclick="myFunction()">Показать</button>
</div>

Код JavaScript через функцию

/* на JavaScript через функцию */
function myFunction() {
  document.querySelector('#demo').innerHTML = "Подарочный сертификат на 20 000 руб. <a href='https://ostogramm.ru/redirect/?to=&anchor='>Скачать</a>";
}

 

Пример:

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

General chat

Please enter your display name

×
×
  • Create New...

Important Information

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Privacy Policy и Guidelines, в ином случаи просто покиньте его.