Как с помощью js добавить html код в div. HTML в Div через JavaScript или jQuery.
Добавить можно, естественно, не только в 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 Comments
Recommended Comments
There are no comments to display.