Перейти к содержанию

Как с помощью js добавить html код в div. HTML в Div через JavaScript или jQuery.


Печенег

8521 просмотр

 Поделиться

Добавить можно, естественно, не только в 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>";
}

 

Пример:

See the Pen JS добавить html код в div. HTML в Div через JavaScript или jQuery. by ITwing (@itwing) on CodePen.

 Поделиться

0 Комментариев


Рекомендуемые комментарии

Комментариев нет

Гость
Добавить комментарий...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Общий чат

Введите ваше имя

×
×
  • Создать...

Важная информация

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