Поиск

Посчитаем текущее количество символов в полях формы (в тегах input и textarea), а также динамически отобразим их количество при изменении данных. HTML: <input class="counted" value="Some test string. Hi!" > <br> <input class="counted" value="Some test string. Goodby!" > <br> <textarea class="counted">Another test</textarea> CSS: .counted + span { margin-left:10px; } JavaScript (jQuery): $(document).ready(function() { $('.counted').each(function() { //для всех элементов с классом .counded $(this).after('<div>' + $(this).val().length + ' символов</div>'); //выведем калькуляцию после каждого поля }); }); $('.counted').on('keyup', function() { //присоединяем событие нажатия кнопки для функции $(this).next('div').html($(this).val().length + ' символов'); }); Готово! Пример: See the Pen Подсчет символов в input, textarea by ITwing (@itwing) on CodePen.

Добавить можно, естественно, не только в 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='#'>Скачать</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='#'>Скачать</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='#'>Скачать</a>"; } Пример: See the Pen JS добавить html код в div. HTML в Div через JavaScript или jQuery. by ITwing (@itwing) on CodePen.

Скрываем содержимое блока div или другого элемента html и реализовываем плавное разворачивание и сворачивание блока по нажатию на ссылку, кнопку или любой другой элемент. Пример HTML верстки <div class="full__desc"> <a href="#">Показать полное описание!</a> <div class="hide">Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст.</div> </div> Код JavaScript $(function() { $('.full__desc .hide').hide(); $('.full__desc a').on('click', function(event) { event.preventDefault(); $('.full__desc a').not(this).next().slideUp(500); $(this).next().slideToggle(500); }); }); Вот и всё! Рабочий пример ниже. Пример See the Pen jQuery плавно показать скрыть блок div by ITwing (@itwing) on CodePen.

CodePen - популярный онлайн-сервис для написания и быстрой отладки кода на HTML, CSS, JavaScript.